ready always returns true on the server (even when ns is not in serverSideTranslations)

[arishoham]

🐛 Bug Report

In my app we use some dynamically loaded translation files where the namespace is not in serverSideTranslations and instead we use the ready flag (from useTranslation) to determine when the translations are available on the client.

Recently we've noticed that the ready flag ALWAYS returns true on the server, but then false on the initial client render when the ns is not SSRed. This causes a hydration error.

To Reproduce

A minimal reproducible example. (slightly modified from the example auto-static-optimize)

link to component: https://github.com/arishoham/broken-i18n-ready-flag/blob/main/components/TestComponent.tsx

export const TestComponent: FC<Props> = () => {
  const { t, ready } = useTranslation('second-page');

  return <div>{ready ? t('title') : 'Loading...'}</div>
}

Expected behavior

I expect on the server ready to be false because the second-page namespace is not in serverSideTranslations (here).

Your Environment (for my actual app)

• node: v20.12
• i18next version: i.e. 15.3.0
• i18next-http-backend: 2.5.0
• os: Mac

[adrai]

on server side it always tries to load all namespaces... and the ready flag is always true on server side, since there is no suspense...
there is not much we can do here...

[adrai]

https://github.com/i18next/i18next-http-backend/tree/master/example/next#4-setup-your-client-rendered-pagescomponents

=> https://github.com/i18next/i18next-http-backend/tree/master/example/next#alternative-usage-the-preferred-way

[arishoham]

@adrai It looks like even the client-page example in the i18next-http-backend repo (here) causes a hydration error because ready is true on the server. What is the recommended way to load translations on the fly for dynamic components that aren't in the initial page render?

^ this is from the next-i18next docs (here) but it seems like using the ready flag at all will cause re-render issues

[adrai]

That's why I suggest the alternative way and not use the ready flag.