On demand namespaces doesn't load

[viclafouch]

Describe the bug

Following this discussion : https://github.com/sergiodxa/remix-i18next/discussions/171

Looks like it's an issue :/

Hello there! I was using this integration with multiple namespaces to load them only where are needed, but when I go to another page via remix links, the json file doesn't load and the UI shows the raw keys, any idea of why?

What's the solution ?

Your Example Website or App

/

Steps to Reproduce the Bug or Issue

Example :

• Route 1 : export const handle = { i18n: ['checkUp'] }
• Route 2 : export const handle = { i18n: ['home'] }
• Route 3 : export const handle = { i18n: ['followUp'] }

You hardreload on Route 1, you have your correct namespaces / translations. But If I go on the Route 2, then getInitialNamespaces function from remix-i18next/client is not executed again.. So we all of the keys are not translated..

Expected behavior

If you go on Route 2 from Route 1, your namespaces must be loaded first.

Screenshots or Videos

No screenshots

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[sergiodxa]

Are you setting the namespace in useTranslation hook from react-i18next?

[viclafouch]

Yep, I'm doing this const { t } = useTranslation(['checkup', 'common'])

Doesn't change anything :/

export const handle = {
  i18n: ['checkUp']
}

const CheckUpRoute = () => {
  // root.tsx has the `common` in the handle
  const { t } = useTranslation(['checkup', 'common'])
...
}

[viclafouch]

Ooo I find, it was checkUp and no checkup.

BUT, now, it's working, and at the same time, I added translations to the meta (title, description, etc..). But it's kind of slow when I change page.

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const t = await i18nextServer.getFixedT(request, 'followUp')
  const title = t('followUp:afterCheckUp')

  return json({ title })
}

In my network tab, it take 1 second to load the page just because of this Promise, it's a lot. Do you have any tips to accelerate this ? Like caching ? Defer ?

[sergiodxa]

If you're fetching the translations from a service I would cache that If your translations are deployed along your app I would load them immediately since there's no benefit of on-demand load server-side

[viclafouch]

OK perfect thanks !