Cache with Server Components to improve first load performance and experience

[jorgebef]

Hi!

So I've been using next-intl for quite a bit now and following the development which is absolutely awesome work and brings great functionality that I appreciate greatly.

I've been trying to improve the first load of a project using this library so that the first time a user loads the page, it doesn't take 3+ seconds to load, rather keep it in the 1 second range more or less (using Vercel to deploy).

However, I've been comparing the same project using this library and a static approach following the examples set by Vercel in the docs (https://beta.nextjs.org/docs/guides/internationalization)

The thing is, yes, once cached, the request using next-intl (SSR since SSG isn't supported at this time) and working with the provided info in the docs (https://next-intl-docs.vercel.app/docs/next-13/server-components#cdn-caching) I can indeed cache the request, however, when I attempt to set an s-maxage=86400, stale-while-revalidate=2592000 (being 24hours = 86400 seconds), the cache-control header is set correctly, but in my testing, let's say around 1 hour later, the page needs to perform a full reload, taking again the 3+ seconds to first load and cache correctly, returning an x-vercel-cache: MISS.

I might be missing something here, but I believe that by setting s-maxage=86400 together with the stale-while-revalidate the page should only take long to load the very first time it's built, cache it in Vercel's CDN, and then serve the same version for 86400 seconds, serving stale version after that for up to the 2592000 seconds and refreshing said Cache behind the scenes, so next request obtains an updated version, right?

With the SSG version, I get extremely good performance because, well, it's statically generated, so it's expected to be honest.

I must be missing something and if anyone has any pointers, it would be much appreciated!

[amannn]

Hello @jorgebef!

Hmm, that's interesting. Maybe what you're seeing is an example of this:

(from the Vercel caching docs)

Out of interest: How many requests does your project receive? If there are infrequent requests, maybe the cache is purged earlier?

As a side note: SSG is expected to be supported by next-intl as soon as Server Context works reliably, so it should only be a matter of time.

[jorgebef]

Yes, I actually checked the Vercel docs and found that, which is why I thought it was weird that it would reset even within the same day.
The project I was testing this with is just a side project with basically no traffic that I know of, just myself testing it out, so between each request it should only be myself.

One of the annoying parts of using the Nextjs docs approach for i18n (apart from not having the plethora of niceties next-intl has) is prop drilling the locale to oblivion.

I'm looking forward to Server Context to be fully implemented. Do you have any relevant links / issues / PR's to read more about it?

[amannn]

One of the annoying parts of using the Nextjs docs approach for i18n (apart from not having the plethora of niceties next-intl has) is prop drilling the locale to oblivion.

Yep, that's very much the reason why next-intl currently requires SSR, since this allows for a workaround!

Do you have any relevant links / issues / PR's to read more about it?

Unfortunately there's very little information about it:

• https://twitter.com/sebmarkbage/status/1587615489605369861
• Server context not transferred after page transitions (createServerContext) vercel/next.js#44222
• https://twitter.com/jamannnnnn/status/1641179951004102657

The React repo also has some tests for it if you search in the code base, but I think that's pretty much it for now!