Show updated translations without full page reload (Next.js)

[VitaliyPotapov]

I store translations in CMS (Sanity) and load them in request.ts:

export default getRequestConfig(async (params) => {
  const messages = /* ...load from CMS */

  return {
    // ...
    messages,
  };
});

What I want to achieve:
When I change translations in CMS, the updated messages are shown to the user on page navigation, without full page reload.
(I know that many our users do not reload the app for a long time).
I've noticed that currently request.ts is not executed during page navigations, so updated translations are not picked up.
Is it possible?

[amannn]

getRequestConfig is called when you invoke useTranslations or getTranslations in a Server Component. It's caching behavior really depends on the caching rules for your pages.

I think what many people who use a CMS do is to invalidate relevant pages when the underlying data changes. If your pages use caching, you could consider invoking revalidatePath in a Route Handler. See also Caching in Next.js.

[VitaliyPotapov]

Thanks @amannn ! Yes, we already revalidate pages, using tags instead of path for more fine-grained control.
But after revalidation we need a request to fetch the updated translations. Some of our pages are mostly client-side pages:

export default function Page() {
  return <ClientPage />;
}

Is it correct that when navigating by such pages, new translations will not be fetched (as there are no calls of *Translations() methods on server)?

[amannn]

Is it correct that when navigating by such pages, new translations will not be fetched (as there are no calls of *Translations() methods on server)?

They rely on the messages you pass to NextIntlClientProvider (typically in a root layout).

So in your case you need to ensure the layout renders for the next request. Might need some logging to verify this, but when in doubt, a revalidatePath('/') would be the sledgehammer method (maybe useful at least for testing).