This Website Uses Zero JavaScript

Well, to be honest, it uses a shitload of JavaScript at build time, but you can check the network tab in the dev tools... 0 JS files.

As a resolution for myself in 2024, I've decided to blog more and not overthink what I should write about, and whether if it's being read by someone or not. It's been more than 3 years since my last post (what the heck, dude?).

The last thing I was doing on this website, was migrating it to NextJS (which it currently is), but with an extra trick, which is to use Zero-JavaScript at the client side. Let's be frank here, the blog doesn't need any interactivity, fancy DOM manipulations or CSS tricks, it's just plain documents as per what the web was originally envisioned for, but I was able to use all of the available and cool ecosystem of React and its DX.

The Zero-JavaScript thing is actually achievable with NextJS v14 by using a feature which currently is undocumented (or I missed finding it), but was in v12 when I first started migrating the website in 2021 (holly hell!), and it still works!

Simply by setting a flag in your pages config object like this:

export const config = {
  unstable_runtimeJS: false,
}

Now the generated output will have the HTML/CSS needed for the website to function, and the JS stuff won't be used. This actually similar to Next's Static Export feature but without the rehydration stuff. Normally, with Server Side Generation, React and NextJS runtimes would be served along with the HTML and CSS. All the possible pages that a user could land on, let's say my /about page, would be fully generated in HTML and served to the browser, but then the NextJS runtime would kick in and the website would behave as it was a single-page application (no full document fetching when navigating to other pages).

Last year the React team announced Server Components with NextJS (more meta frameworks are on the road to support them too), so maybe 2024 will feature more Zero-JavaScript on the client side around the web, and hopefully - along with it - this blog will have more posts 😃