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
- 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:
- Code language
- 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'
}
};
}