Sling Academy
Home/Next.js/Next.js: Disable Server-Side Rendering on Specific Pages

Next.js: Disable Server-Side Rendering on Specific Pages

Last updated: January 09, 2023

There may be situations where you want to disable server-side rendering (SSR) on one or some specific pages of your Next.js application, such as you get some warnings or errors when using a third-party library due to SSR or you want a page to behave like a normal React page without SSR in any way. Luckily, Next.js gives us a built-in function to do so: the dynamic() function that can be imported from next/dynamic. Alternatively, you can use a third-party package named react-no-ssr. Let’s explore these two different techniques in this practical article.

Using the dynamic() function

What we need to do is to create a wrapper component named NoSSRWrapper. Just wrap any page you want to disable SSR in that component.

Create a new folder called components in your project (if this folder doesn’t exist yet), then create a file name no-ssr-wrapper.js right there:

import dynamic from 'next/dynamic'
import React from 'react'

const NoSSRWrapper = props => (
  <React.Fragment>{props.children}</React.Fragment>
)

export default dynamic(() => Promise.resolve(NoSSRWrapper), {
  ssr: false
})

Let’s say we want to disable SSR on a feed page in the pages folder:

// pages/feed.js
import NoSSRWrapper from "../components/no-ssr-wrapper";

const Feed = props => {
  return <NoSSRWrapper>
    {/* ... */}
  </NoSSRWrapper>
}

Using the react-no-ssr package

This package provides a simple and quick solution to deal with client-only components/pages in Next.js.

Install:

npm i react-no-ssr

Usage:

import React from 'react';
import NoSSR from 'react-no-ssr';
import FeedComponent from './feed-component';
 
const SomePage = () => (
  <div>
    <h1>My Personalized Feed</h1>
    <hr />
    <NoSSR>
      <FeedComponent />
    </NoSSR>
  </div>
);

export default SomePage;

Which of these two methods would you choose? Both are concise and effective. Please let us know your thoughts by leaving comments. Happy coding!

Next Article: Next.js: How to Set Page Title and Meta Description

Previous Article: Passing data via a Link component in Next.js

Series: Fetching and Rendering Data in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported