Disable client-side React with Next JS

Categories

Frameworks like Next JS output a lot of heavy-duty client side JavaScript, so this quick tip stops that to have a huge positive impact on performance.


Next JS is a fantastic framework, but it produces some eye-watering client-side JavaScript bundles, thanks to React JS’s notorious bundle sizes.

You can completely disable the client-side Javascript bundles with this little snippet:

Code language
JavaScript
export const config = {
  unstable_runtimeJS: false
};

This is an experimental/beta feature, it seems, but I can vouch for how effective it is because every single page on this site is powered by Next JS and has 0kb of client-side React code!

Here’s an entire page component with this snippet in context, that you can use as a template for pages that you want client-side JavaScript to be disabled on:

Code language
JavaScript
export const config = {
  unstable_runtimeJS: false
};

export default function MyLightweightPage({message}) {
  return (
    <article>
      <p>{message}</p>
    </article>
  );
}

export async function getStaticProps() {
  return {
    props: {
      message: 'Hello, world'
    }
  };
}

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.