A Look At Component Reactivity

Although EdgeJS Components draw inspiration from popular front-end frameworks like Vue and Svelte, it’s important to remember that it’s a back-end rendered template engine and can’t replicate all of the principals of the front-end ecosystem.

EdgeJS & Reactivity

The primary principal EdgeJS can’t replicate is reactivity. In front-end applications reactivity allows us to dynamically update the DOM based on state and is usually maintained by one or two way data binding. This works for front-end applications because the state can be maintained client-side in the browser.

With EdgeJS, this becomes difficult to manage because by the time our server-rendered HTML hits the browser EdgeJS has already done it’s job and is out of the picture.

For more advanced components we could reach for a package like HTMX, Hotwire, or Unpoly to allow EdgeJS to become reactive to some extent by utilizing HTML of the wire; which is just a fancy term for sending an API request and getting back new server-rendered HTML in our response.