Next.js has become one of the most popular frameworks in the React ecosystem. It facilitates developing Server-side rendered (SSR) React apps without starting over with create-react-app. Next.js routing and other built-in configurations are designed primarily for SSR and crawling towards Static Site Generation (SSG).

But, there can be instances where you will not need SSR for one or more Next.js components in your application. So, in this article, let’s discuss how you can develop non-SSR-friendly Next.js components by disabling SSR.

What is Server-Side-Rendering?

Server-side rendering is an approach for rendering an app on the server in response to every request and then returning the full HTML and Javascript to the client. First, the server handles all necessary data and runs the JavaScript. Then, it generates the page and sends it to the client as a whole.

This makes it possible to serve dynamic components as static HTML markup. SSR can be beneficial for search engine optimization (SEO) whenever indexing fails to interpret JavaScript effectively. It may also be useful when slow internet connectivity makes downloading a large JavaScript bundle cumbersome. In addition, if you need your rendered page to be up-to-date, going for SSR would be ideal.

When Not to Use Server-Side-Rendering?

Sometimes, you might need to opt-out of SSR from Next.js pages or components. For example, integrating third-party libraries and modules that only operate in the browser, or if your component requires accessibility to browser-exclusive properties like the window object or localStorage does not require SSR.

Also, disabling SSR is also beneficial in reducing the size of huge or resource-intensive modules in your bundle that only a few users necessitate.

For non-trivial applications, the usage of SSR may differ because it demands a more extensive configuration and imposes a higher load on the server. Moreover, there is a possibility of the application being slow when there is a lot of processing because the client has to wait for every page to render after making a request. In such scenarios, disabling SSR would be a better option.

So, whether to use SSR or not in your project is a matter of personal preference, and you have to decide between trade-offs based on the situation.

Next, let’s look at a few methods you can use to disable SSR in Next.js.

How to Disable Server-Side-Rendering in Next.js?

1. Use next/dynamic imports

Next.js claims to support ES2020 dynamic import() for JavaScript. It allows you to import JavaScript modules dynamically and works collaboratively with SSR as well.

You can use the ssr: false object to disable server-side rendering of your dynamically imported component, as shown below.

import dynamic from 'next/dynamic'

const ComponentWithNoSSR = dynamic(
  () => import('../components/helloWorld'),
  { ssr: false }
)

function Hello() {
  return (
    <div><Header /><ComponentWithNoSSR/><p>HELLO WORLD!</p></div>
  )
}

export default Hello

Or else, you can create a wrapper component called NonSSRWrapper and then enclose any page in that component to disable SSR.

import dynamic from ‘next/dynamic’ 
import React from ‘react’ 
const NonSSRWrapper = props => ( 
    <React.Fragment>{props.children}</React.Fragment> 
) 
export default dynamic(() => Promise.resolve(NonSSRWrapper), { 
    ssr: false 
})

For example, assume that you want to disable SSR on a Home page in the pages folder. It can be done as follows:

// pages/home.js 
import NonSSRWrapper from “../components/no-ssr-wrapper”; 

const Feed = props => { 
   return <NonSSRWrapper> 
    //content
   </NonSSRWrapper> 
}

2. Check if the window object is defined

We have to check if the window object is defined to see whether we’re on the server-side or the client. To make this easier, a utility function can be defined.

Given below is an example to depict how to disable SSR for components by simply checking for window object is defined or not.

import { Home} from ‘./Home’;

const isSSR = () => typeof window === ‘undefined’; 

const HomePage = () => { 
   return ( 
     <Header /> 
       {!isSSR() && <Home/>} 
     <Footer /> 
 );
}
export default HomePage;

3. Using react-no-ssr package

no-ssr is a React component that wraps non-SSR components.

This wrapper makes it easy to deal with client-only components when working with applications that use Server-Side Rendering (SSR).

First, you need to install it as below.

npm i --save react-no-ssr

For example, let’s assume that Home component is needed to be rendered on the client-side. Here's how we do it.

import React from 'react';
import NoSSR from 'react-no-ssr';
import Home from './home.jsx';
const DisableSSR= () => (
   <div><h2>My SSR Disabled App</h2><hr /><NoSSR><Home/></NoSSR></div>
);

This way <Home/> component will only be rendered on the client after it has been mounted. It will not render while server-side rendered HTML is booting up in the client. Therefore, no React warning messages will appear in the console.

</div