Full Route Cache not working

[awinogrodzki]

Description

I've noticed that adding NextIntlClientProvider disables Full Route Cache.

This made my app performance drop from ~300req/s to ~10req/s on single instance which is a real deal when it comes to costs.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/next-intl-bug-template-forked-yow8ep

Reproduction description

Use NextIntlClientProvider in layout.tsx

Expected behaviour

Ideally, NextIntlClientProvider would not disable Full Route Cache

Next.js docs provide a list of conditions to be opted-out from Full Route Cache: https://nextjs.org/docs/app/building-your-application/caching#opting-out-2

[awinogrodzki]

I will close this one. It seems that Full Route Cache is not working as expected in latest version of Next.js. I will investigate further and create an issue in Next.js repo instead.

Cheers 🎉

[amannn]

Thanks! Can you link to the Next.js issue here after you've created it for reference? I've upgraded https://next-intl-example-next-13.vercel.app/ to Next.js 14.0.1 yesterday and as far as I can tell, there's been no regression.

[awinogrodzki]

@amannn

I was not sure it is actually an issue or feature request, so I created a discussion: vercel/next.js#57961

Supposably generateStaticFunction can enable Full Route Cache for Dynamic Routes. The question is if new routes can be added dynamically, as it was previously with Incremental Static Regeneration in Page Router

I've already solved the issue by using Caddy server in front of Next.js app and modifying Cache-Control headers in Middleware. Works brilliantly, but it's a bit unfortunate I have to support yet another service just to do the caching.

[awinogrodzki]

@amannn UPDATE:

Turns out it is undocumented and possibly unexpected behaviour in Next.js – details

tldr;

To enable Full Route Cache for dynamic segments, you need to export dummy generateStaticParams method from page.tsx:

export async function generateStaticParams() {
  return [];
}

If you do, page is market as SSG and cache is working as expected.

Cheers 🎉

[awinogrodzki]

Another UPDATE:

I am afraid I need to reopen the issue.

After enabling SSG with NextIntlClientProvider from 3.0.0-rc.* SSG started failing with error:

@ensite/client:start-local:  ⨯ Page changed from static to dynamic at runtime /, reason: headers
@ensite/client:start-local: see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
@ensite/client:start-local:     at staticGenerationBailout (/Users/winogrodzki/Projects/ensite/packages/client/.next/server/chunks/811.js:1:2266)
@ensite/client:start-local:     at headers (/Users/winogrodzki/Projects/ensite/packages/client/.next/server/chunks/9367.js:1:48647)
@ensite/client:start-local:     at /Users/winogrodzki/Projects/ensite/packages/client/.next/server/chunks/9367.js:1:44212
@ensite/client:start-local:     at /Users/winogrodzki/Projects/ensite/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:108:5119
@ensite/client:start-local:     at s (/Users/winogrodzki/Projects/ensite/packages/client/.next/server/chunks/9367.js:1:44936)
@ensite/client:start-local:     at e (/Users/winogrodzki/Projects/ensite/packages/client/.next/server/chunks/9367.js:1:45028)
@ensite/client:start-local:     at NextIntlClientProvider_n (/Users/winogrodzki/Projects/ensite/packages/client/.next/server/chunks/9367.js:1:47222)
@ensite/client:start-local:     at em (/Users/winogrodzki/Projects/ensite/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:10452)
@ensite/client:start-local:     at /Users/winogrodzki/Projects/ensite/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:22148
@ensite/client:start-local:     at Object.toJSON (/Users/winogrodzki/Projects/ensite/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:25726)

The reason is here:

next-intl/packages/next-intl/src/react-server/NextIntlClientProvider.tsx

Line 21 in 9697c3c

defaultLocale = useLocale();

And not limited to NextIntlClientProvider:

next-intl/packages/next-intl/src/navigation/react-server/createLocalizedPathnamesNavigation.tsx

Line 29 in 549dc17

const defaultLocale = getRequestLocale() as (typeof locales)[number];

I was wondering if it would be possible to rely solely on locale from server component params instead of using headers().get(HEADER_LOCALE_NAME) which basically disables SSG

@amannn 🙏

[awinogrodzki]

After some investigation I found out that if I call unstable_setRequestLocale(props.params.locale) it saves locale in getCache().locale which prevents headers() from being called and the page renders successfully, but at the same time it returns HTTP status 500 on each render, which prevents cache from working anyways.

[awinogrodzki]

I must close the issue again.

I have traced down the issue and it's not next-intl.

The problem was caused by next-nprogress-bar library.

It seems that unstable_setRequestLocale solves the issue with SSG.

Sorry for the trouble and thanks for library!

When I finish with some of my projects, I will definitely contribute to this awesome lib. Cheers!