A question about getTranslations() function and SSG

[abdllhcay]

Hi, I have a async server component named OrganizerDetailPage. And in this component I call getOrganizerProfileAsync function which calls back-end API and retrieves the organizer profile. This page is rendered statically and API response is cached. But if I call the getTranslations method, instead of pulling the data from the cache, it sends a request to the backend every time. What am I doing wrong?

export default async function OrganizerDetailPage({
  params: { username, locale },
}: {
  params: { username: string; locale: string };
}) {
  unstable_setRequestLocale(locale);

  const t = await getTranslations({ locale, namespace: "common" });
  const profile = await getOrganizerProfileAsync(username);

  return (
    <div>
      {t("hello") + profile.name}
    </div>
  );
}

Without getTranslations it's working as expected. Getting data from the cache.

export default async function OrganizerDetailPage({
  params: { username, locale },
}: {
  params: { username: string; locale: string };
}) {
  unstable_setRequestLocale(locale);

  const profile = await getOrganizerProfileAsync(username);

  return (
    <div>
      {profile.name}
    </div>
  );
}

[amannn]

Hmm, your code looks correct to me. Can you maybe share a reproduction based on https://github.com/amannn/next-intl-bug-repro-app-router?

[abdllhcay]

It's really weird. It worked when I tried it in the repo you shared. Then I setted up the same structure in my own project there and it worked again. Next and next-intl versions are also the same. But it's not working on my project. Could it be something related to 3rd party packages?

[abdllhcay]

And one more note I tried useTranslations() in a non-async component and the result is the same. Doesn't hit cache.