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
select the option with left right arr and hit enterStep 2: Create a components folder in pages directory add a csr.js file and make sure the structure is as follows.
project structure.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.
whole page rendered on client side only2. 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.
Verify client only componentConclusion
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.
Similar Reads
Next.js Authenticating Server-Rendered Pages In Next.js, server-side authentication for pages ensures that user data and access permissions are validated before rendering pages on the server. This approach enhances security and provides a better user experience by ensuring that only authorized users can access specific pages. In this article,
6 min read
How to Change URL Without Page Refresh in Next.js? In web development, the ability to change URLs dynamically without triggering a full page refresh is essential for creating smooth, seamless user experiences. Next.js, a popular React framework, offers built-in features to achieve this efficiently through its client-side routing capabilities. In thi
3 min read
How to Share Data Between Pages in Next.js? Sharing data between pages in Next.js can be crucial for maintaining state and passing information efficiently. You can achieve this with the help of URL parameters. In this article, we will learn about how to share data between pages in next.jsApproach to Share Data Between PagesUse the Link compon
2 min read
How to Redirect in Next.js ? NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to Redirect in NextJS with different
4 min read
How to Disable the ETag Generation in Next.js ? ETags (Entity Tags) are a mechanism used by HTTP to validate the cache of resources and improve performance by avoiding unnecessary data transfers. In Next.js, ETags are generated by default for API routes to optimize caching. However, in some cases, you may need to disable ETag generation, such as
3 min read