Disable client-side React with Next JS

Published on by Andy Bell

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:

js
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:

js
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'
    }
  };
}