Translations are not SSR?

[thomasverleye]

Is it true the translations need to load client-side first before rendering?
When implementing we notice some flashes where the translation key is visible.

[sergiodxa]

@thomasverleye you need to load the translations on both the server and client.

On entry.server, you need to load them before rendering so the HTML comes with the correct texts.

On entry.client, you need to load them before hydrating the app because without that, the hydration will replace the translated strings with the keys and then once it loaded the translation files it will switch them back again.

[florianchevallier]

@akash191095 did you find a way to fix this ? :D

On my side, I always see the translations strings before seing the good ones.

Edit : strangely enough, it seems to be fixed by removing the useSuspense: false from the i18n.ts file

[akash191095]

@florianchevallier it was an error on my part when I setup the translations

1. it was not setup correctly according to the instructions provided.
2. I was not loading the right translations needed, it was either:
   export let handle = { i18n: "home" };
   or
   useTranslation("home")

Sorry it was an old project and I could find it to provide more specific info

[HeroProtagonist]

I was experiencing the flash. I also missed export let handle = { i18n: "home" }; in the component, which is in the docs. So most likely if you see the flash that is why.

[florianchevallier]

I'm not sure anymore. Do you set it for each page ?
It's already set for the root.tsx for sure on my side

[HeroProtagonist]

I got it working.
I don't have a handle for root, but have one for each route component that corresponds to the namespaces used by the component.