Caching localized pages (when URL doesn’t contain language)

[tlrobinson]

Maybe I’m approaching this entirely wrong, so feel free to suggest better approaches (I would prefer not to put the language in the URL or domain or path for pages that are not primarily content though)

I use Fastly as a CDN, and would like to be able to cache entire localized pages in it, but my root layout accesses the Accept-Language header to determine which language to render. That triggers dynamic rendering and the Cache-Control: … no-cache … headers, as it should.

However, in a previous stack I had Fastly resolve the Accept-Language header into a custom X-Language header with the exact language to render, then included that in my cache key to ensure it cached and correctly served each localized page.

I’d like to do the same with Next.js App Router, but if I access the X-Language it will trigger dynamic rendering and no-cache etc.

Maybe ideally there would be a way to tell App Router which headers to vary the cache on, then it would return the appropriate Vary header and cacheable Cache-Control headers?

Any other workarounds or better approaches?

[Juneezee]

I would prefer not to put the language in the URL or domain or path for pages that are not primarily content though)

The Next.js documented way is to use middleware to detect Accept-Language header and generateStaticParams. However, this requires you to internationalized your app by using sub-path, or domain. See https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview

Once you used dynamic functions like import { headers } from 'next/headers', the page automatically becomes dynamically rendered, and there is no way to manually change this behavior.

Maybe ideally there would be a way to tell App Router which headers to vary the cache on, then it would return the appropriate Vary header and cacheable Cache-Control headers?

Maybe you could try the headers option in next.config.js? See https://nextjs.org/docs/app/api-reference/next-config-js/headers#header-cookie-and-query-matching