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 - neveropen</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:
