Disable Server side rendering (SSR) in Next.js

To disable server side rendering (SSR) in Next.js you need to dynamically import your React components with _next/dynamic_ and set the _ssr_ flag to false.

Here is how to import dynamically React components and to set the ssr flag to false in Next.js.

Dynamic import

To dynamically import a module, Next.js supports the latest ES2020 dynamic import for JavaScript, in particular, to import React components dynamically in Next.js, you have to do it with next/dynamic to make sure it will works fine, and you have 3 choices to specify it.

First choice: Direct import

The direct import is possible using dynamic(import(‘module’)) syntax.

Here is an example of our hello component

The import statement returns a promise, so in case our component is a named export, more in depth about exports, we can use then and get the named export like below, you can check more about promises in this link

The file /components/hello.js

export function Hello() {
	return <p>Hello there!</p>;
}
export default function HelloDefault() {
	return <p> Hello default!</p>;
}

In _pages/home.js_ we can call the dynamic import with named exports like so:

import dynamic from 'next/dynamic';

//the named export with then promise
const DynamicComponent = dynamic(
	import('../components/hello.js').then((mod) => mod.Hello)
);

//the default export
const DynamicDefaultComponent = dynamic(import('../components/hello'));

function Home() {
	return (
		<div>
			<Header />
			<DynamicComponent />

			<p>HOME PAGE is here!</p>
			<DynamicDefaultComponent />
			<p> the dynamic default export</p>
		</div>
	);
	/*output
Hello there!

HOME PAGE is here!


Hello default:!

the dynamic default export
 */
}

export default Home;

Second choice: Import as a function

The import as a function is also possible using the syntax dynamic(() =>import(‘module’))

The default and named export are also possible like so:

//named export

const DynamicComponent = dynamic(() =>
	import('../components/hello').then((mod) => mod.Hello)
);
// default export
const DynamicDefaultComponent = dynamic(() => import('../components/hello'));

Third choice: Import as an object

The import as an object is also possible with loader as a key with the syntax: dynamic({loader: import(“module”),})

Take a look at this example

//named export
const DynamicComponent = dynamic({
	loader: import('../components/hello').then((mod) => mod.Hello)
});
// default export
const DynamicDefaultComponent = dynamic({
	loader: import('../components/hello')
});

Set SSR flag to false

To set the SSR flag to false, the Next.js dynamic function takes in an object with key ssr, you can also add a specific loader if you wish like so:

//named export
const DynamicComponent = dynamic(
	{loader: import('../components/hello').then((mod) => mod.Hello)},
	{loading: () => <p>...</p>, ssr: false}
);
// default export
const DynamicDefaultComponent = dynamic(
	{loader: import('../components/hello')},
	{loading: () => <p>...</p>, ssr: false}
);

Once the ssr is false, the rendering is disabled in server side, Next.js does that by checking whether the javaScript window object is defined or not, if defined, it removes modules and webpack to prevent react-loadable from preloading.

Conclusion

We present how to disable SSR in Next.js by dynamically import React components using next/dynamic, we also present the three ways on how to import dynamically the components in Next.js using the dynamic function, and how to set the ssr flag to false and what Next.js does in this case.