You might not need SSG with Remix

When Remix went open source I was pretty excited to try it out, mostly because it labelled itself as a framework that embraces web fundamentals. I was using Nextjs at the time and was pretty happy with it.

Remix first impressions #

On the first try, I liked features like form support web way and nested routes. It felt like a better version of already good nextjs(like C++ is to C). One missing feature bugging me was SSG(Static site Generation). Nextjs has great support of SSG and I always tried to do SSG whenever possible. Remix does not support SSG and it annoyed me a bit.

SSG stands for Static Site Generation and in this approach, data is fetched on build time and stored as HTML. So when the user requests for a page then generated HTML is returned, saving time to request data on runtime.

In the last few years, plenty of SSG frameworks like Jekyll, Hugo, Gatsby, 11ty and Nextjs have become popular. Nextjs is my favourite because it supports both SSG and SSR(Server Side Rendering) as I feel this hybrid approach works best for most of my work.

How to achieve SSG like performance with Remix #

Remix does not support SSG by default, but we can achieve almost similar performance.

How do you ask?

And the answer is (as in most cases)

Caching

We can set stale-while-revalidate Cache-Control header if a CDN is being used.

In remix you can do so by adding the following code to the route.

export function headers() {
return {
"cache-control": "max-age=604800, stale-while-revalidate=86400"
}
}

Additional points #


Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated ! For feedback, please ping me on Twitter.

Published