ETags in Next.js App Router

[ennair]

I've encountered an issue with the Next.js app router where ETags are not automatically applied to the HTML document. They are applied to all other files, but not to the HTML document. I used create-next-app and set generateEtags: true in the next.config.js file (even though this is the default setting). However, the HTML document still doesn't have an ETag.

Why is this happening, and how can I resolve it? I need ETags for the HTML document for caching purposes.

[ennair]

I have found some more information about this issue. It appears to only affect dynamic routes. For dynamic routes, no ETag is generated on the HTML document. When I add export const dynamic = 'force-static'; to my dynamic route, an ETag is generated on the HTML document. However, this setting has a major drawback: it causes the cookies, headers(), and useSearchParams() functions to return empty values (source: Next.js Documentation about dynamic).

This is the piece of code in Next.js where it intentionally does not generate an ETag for dynamic routes. https://github.com/vercel/next.js/blob/v15.1.6/packages/next/src/server/web-server.ts#L296

So, the questions that remain are:

1. Why is no ETag generated on the HTML document for dynamic page routes?
2. Why do the cookies, headers(), and useSearchParams() functions return empty values when using force-static?
3. Why does the Next.js documentation not mention that setting generateEtags to true only works for non-dynamic routes (source: Next.js Documentation about generateEtags)?

[melutovich]

As none of the develops have commented on this discussion perhaps you should open it as an issue and see what they say then?

As a workaround perhaps you could use Route Handlers or middleware to either generate your own ETag header and/or add another response header like Cache-Control

[achepukov]

+1 pretty depressing to not mention in documentation that e-tag is not generated for app router

[Gavrushuk]

But seems like it's a bad idea because we have the same issue, and for the dynamic page (for static it's ok), it doesn't work correctly.
Sometimes, when 304 it responds with the RSC code instead of HTML.
And I have no idea how to fix it.
Maybe, do you have more ideas?

[achepukov]

@Gavrushuk this is the exact idea of e-tag: if browser requests e-tag is same as in response, then 304 without content is responded. You seems to need to improve your understanding on how e-tag works, article on mdn is great source.

[Gavrushuk]

@achepukov I mean, on the page in the browser, I saw RSC code (like plain text) instead of an content when I got 304, and this problem only occurs for dynamic routes

I have a different discussion for that #82790

[achepukov]

I'm already in other subject, so can't say for sure. But from middleware source I don't see what could cause this. Perhaps something your project related? Maybe specific nextjs version or other middleware?

[Gavrushuk]

I used a version of Next.js 14.2.23, but I tried to update to 15.5.2, but the problem is still here.
I think maybe the problem is in the request to the backend in the middleware, where I get the last updated date to set it in the Last Modified field, and hashing to ETag.