Not translated on first render

[barbinbrad]

I'm trying to figure out whether this is a bug in my code or "the way it is". I'm guessing I have something wrong in entry.server.tsx

I have some code in my component like this:

{ t } = useTranslation();

return <h1>{t("displays")}</h1>

I noticed that on the first render, the html says displays instead of the translated Displays. It happens very fast, but here's a video of a video to show the first render:

Screen.Recording.2022-09-27.at.6.30.36.PM.mov

[sergiodxa]

This is not how it works, check the entry.server config and ensure your i18next instance has the translation JSON files loaded, how you do that can be either by importing them manually or using an i18next backend file the i18next-fs-backend.

[barbinbrad]

Lots of edits. Sorry about that. Here's the final thought:

The server side is fine. If I load the page directly from the server, it renders as it should.

The problem is the client side. When I go from a page that doesn't require namespace X to a page that requires namespace X, where X.json is fetched from the server, there's a problem in the first render. Even if I prefetch, I get the same result. I think I could make a reproduction repo if you'd like.

[sergiodxa]

Ah yeah that’s sadly expected, it’s how react-i18next works