Wrapping "getTranslations" call in "Promise.all" breaks Next.js static rendering

[Thanaen]

Description

In a Next.js project, using App Router and ISR (exporting a const revalidate = 7200; from the page), wrapping a getTranslations call in a Promise.all results in the page opting out of static rendering / ISR.

Page that works fine:

import { getTranslations, setRequestLocale } from "next-intl/server";

export const revalidate = 7200; // 2 hours in seconds

export default async function WorkingPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations();
  setRequestLocale(locale);

  const renderedAt = new Date().toLocaleString();

  return (
    <div>
      {t("HomePage.title")}
      <h1>Working Page</h1>
      <p>Locale: {locale}</p>
      <p>Rendered at: {renderedAt}</p>
    </div>
  );
}

Page that opted out of ISR silently

import { getTranslations, setRequestLocale } from "next-intl/server";

export const revalidate = 7200; // 2 hours in seconds

export default async function BrokenPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const [{ locale }, t] = await Promise.all([params, getTranslations()]);
  setRequestLocale(locale);

  const renderedAt = new Date().toLocaleString();

  return (
    <div>
      {t("HomePage.title")}
      <h1>Broken Page</h1>
      <p>Locale: {locale}</p>
      <p>Rendered at: {renderedAt}</p>
    </div>
  );
}

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/Thanaen/next-promise-all

Reproduction description

Repository: https://github.com/Thanaen/next-promise-all
Repro preview: https://next-promise-all.vercel.app/

Steps to reproduce:

1. Go to https://next-promise-all.vercel.app/en
2. Click on "EN Broken"
3. Go back (browser back button)
4. Click again on "EN Broken"
5. "Rendered at" changed, proving that the page has switched to dynamic rendering

Expected behaviour

Wrapping getTranslations in a Promise.all shouldn't silently opt out a page from static rendering.

[amannn]

From the static rendering docs:

setRequestLocale needs to be called before you invoke any functions from next-intl like useTranslations or getMessages.

I think that's likely the issue here.

In most cases (except for if you're loading messages from a remote CDN or similar), there's btw. performance-wise also no reason to use Promise.all with getTranslations.

I'll move this to a discussion since it seems to be a usage question.

[Thanaen]

Hello,

While I don't quite agree with the first point (my “working” example calls setRequestLocale after calling getTranslations, and is well statically generated), it's true that there isn't much advantage to calling Promise.all in my example.

But our pages usually load several pieces of data from different sources, which we wrap into a Promise.all, and by consistency, we integrate the params and getTranslations into this Promise.all.

I'd say the problem comes from the fact that, since getTranslations returns a promise, you'd expect to be able to add it to a Promise.all, just like any other promise. It took a while for my team to figure out that the Promise.all was the source of the static rendering disabling, so I hope at least this issue will save other people a bit of time 😄