Skip to content
Related Articles

Related Articles

How to disable the ETag generation in Next.js ?

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Mar, 2022

In this article, we are going to see how we can disable the ETag generation in Next.js. Follow the below steps to disable the Etag in the Next.js application.

ETags: The ETag or entity tag is part of HTTP, the protocol for the World Wide Web. It is a message header field that specifies a unique identifier for a specific version of a resource.

ETags are used to determine if a cached resource is up to date. If the ETag header field in an HTTP response matches the ETag header field in the request, then the response is considered fresh. Otherwise, the resource is considered stale and a new version of the resource must be retrieved.

ETags are also used to prevent simultaneous updates of a resource. If a client attempts to update a resource that has been previously updated by another client, the server can use the ETag header field to determine if the resource has been updated since the last time the client accessed it. If the resource has not been updated, the server can return a 304 (Not Modified) response to the client, indicating that the client should use the cached version of the resource.

Creating NextJs application:

Step 1: To create a new NextJs App run the below command in your terminal:

npx create-next-app GFG

Step 2: After creating your project folder (i.e. GFG ), move to it by using the following command:

cd GFG

Project Structure: It will look like this.

Example: To check the ETag we are adding the below code in the index.js file of the application.

index.js




// Import Link component
import Link from "next/link";
  
export default function Home() {
    return (
        <div>
            <h1>This is a demo - GeeksforGeeks</h1>
            <h2>ETag NextJs</h2>
        </div>
    );
}


Step to run the application: Now run the application with the below command:

npm run dev

Output:

Example: Disable ETag in NextJs, one downside of Next.js is that it generates etags for each page. This can slow down the loading of pages, especially on mobile devices. If you don’t need etags, you can disable their generation by adding the following code to your next.config.js file.

Filename: next.config.js

Javascript




module.exports = {
    reactStrictMode: true,
    generateEtags: false,
}


Step to run the application: Now run the application with the below command:

npm run dev

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!