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

Updated: January 9, 2023 By: Khue Post a comment

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 => (

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>
    {/* ... */}

Using the react-no-ssr package

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


npm i react-no-ssr


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

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!

Notify of
Inline Feedbacks
View all comments