Disable client-side React with Next JS

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

Comments

If you liked this post, you might like these ones, too

  1. Picture element as a progressive enhancement

    🔥 A handy quick tip.

    Continue
  2. Control changing numbers with font variant numeric

    Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.

    Continue
  3. Use CSS Clamp to create a more flexible wrapper utility

    A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.