How to Disable Server Side Rendering on Some Pages in Next.js ?

Last Updated : 01 Jul, 2024

In Next.js 13 and above versions you can use the 'use client' directive to disable the server side rendering and enable the client side rendering for some specific pages or components. This directive indicates that the code should be executed on clint side only.

Prerequisites :

Steps to Setup Nextjs App

Step 1: Use the following command and set a Next.Js project:

npx create-next-app demodisablessr
cd demodisablessr

pse — select the option with left right arr and hit enter

Step 2: Create a components folder in pages directory add a csr.js file and make sure the structure is as follows.

The updated dependencies in package.json file:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.4"
}

Steps to Disable Server Side rendering on Some Pages in Next.Js

Step 1: Update to Next.js 13+

Ensure your Next.js project is updated to version 13 or later, as the use client directive is introduced in this version.

npm install next@latest

Step 2: Using the use client Directive

1. For a Whole Page

To disable SSR for an entire page, add the use client directive at the top of the page component file.

Add the use client directive at the top of the file:

JavaScript

// pages/index.js "use client";  import { useState } from "react";  const ClientOnlyPage = () => {     const [counter, setCounter] = useState(0);      return (         <div>             <h1>Client-Only Page</h1>             <p>Counter: {counter}</p>             <button                 onClick={() =>                     setCounter(counter + 1)                 }             >                 Increment Counter             </button>         </div>     ); };  export default ClientOnlyPage;

By adding 'use client'; at the top of the file, you ensure that this page will only be rendered on the client side.

csrp — whole page rendered on client side only

2. For a Specific Component

To disable SSR for a specific component, you can also use the use client directive at the top of the component file.

JavaScript

// components/ClientOnlyComponent.js "use client";  import { useEffect, useState } from "react";  const ClientOnlyComponent = () => {     const [data, setData] = useState(null);      useEffect(() => {         const fetchData = async () => {             const response = await fetch(                 "/api/data"             );             const result = await response.json();             setData(result);         };          fetchData();     }, []);      return (         <div>             <h2>Client-Only Component</h2>             <pre>                 {JSON.stringify(data, null, 2)}             </pre>         </div>     ); };  export default ClientOnlyComponent;

JavaScript

// pages/index.js import ClientOnlyComponent from "../components/ClientOnlyComponent";  const HomePage = () => {     return (         <div>             <h1>Home Page</h1>             <ClientOnlyComponent />         </div>     ); };  export default HomePage;

3: Verify the Client-Side Rendering

1. Run Next.js application with following command.

npm run dev

2. Inspect the Page Source: Right-click on the page and select "View Page Source". You should see the minimal HTML content for the ClientOnlyComponent, indicating that it is not pre-rendered on the server and is rendered on the client side.

3. Check the Functionality: Click the "Increment Counter" button and observe the counter incrementing, confirming that the component is functioning as expected with client-side rendering.

Conclusion

By using the use client directive at the top of your component or page files in Next.js 13 and later, you can easily disable server-side rendering for specific parts of your application. or if you want to disable at application level or root level of pages one can use directive in pages index.js file as shown in this article.

Server Side Rendering using Express.js And EJS Template Engine

firozsh553l

Improve

Article Tags :

How to Disable Server Side Rendering on Some Pages in Next.js ?

Prerequisites :

Steps to Setup Nextjs App

Steps to Disable Server Side rendering on Some Pages in Next.Js

Step 1: Update to Next.js 13+

Step 2: Using the use client Directive

1. For a Whole Page

2. For a Specific Component

3: Verify the Client-Side Rendering

Conclusion

Similar Reads