Remix - A simpler solution


Over the past few days, I've rebuilt my personal site entirely using Remix. The main benefit is that everything is server-side, similar to other frameworks like NextJS. The primary difference between the two is that Remix uses SSR for every single page, whereas NextJS can decide (based on which functions you include) whether or not to render your page on the server or the client.

Another advantage of remix is its approach to form handling. Rather than using a client-side library like React Hook Form it uses HTML's original form handling in conjunction with Remix Actions.

This allows pages to avoid excessive JavaScript where it's not needed. This is a tremendous benefit for clients as it means that nearly no calculations are performed. Meaning that pages always perform expectedly no matter the platform. This approach also allows sites to have really low load times as a result.

So far I'm really enjoying it.

The only downside that I've seen so far is that processing needs to happen on a JavaScript-capable server. This means that site load times are heavily dependent on where it's being hosted.

Thankfully, the developers of the framework have thought of this and provide a number of different adaptors that allow developers to run their sites on the edge, no matter the platform. So far it supports most major providers including; Vercel, AWS architect, Cloudflare pages & functions, Netlify and Express (if you want to just run it using NodeJS).

Another element that's highly in Remix's favour is the way it handles CSS-in-JS frameworks like those based on Emotion. Because everything is rendered on the server it means that only the data that needs to be on the client is on the client.

Though Emotion doesn't yet work well with React 18's renderToStream I'm excited to see how it turns out in the future.