React-i18next: Translations are not rendered on the server?

[nealoke]

Hi, I've implemented your example with nextjs and everything is working but the translations only show up after the page is SSR. Is there a way to make sure that content is correctly displayed from the initial render?

Example

See the 1 second delay it has on actually rendering the translations? To me this seems like I'm doing something wrong but I'm not sure what it could be, any ideas?

[jamuhl]

looks like your setup is not same as in the sample - looks like either or both: wait option not set, translations not preloaded on server

[nealoke]

@jamuhl thanks for the fast answer but what part of the example of preloading on the server? 😢

I'm using the same withI18next wrapper as in the example (eg. wait={process.browser})

Gist of my server code.

[jamuhl]

that looks ok...is the navigation and language toggling shared in the _app.js? and using something different from 'common' namespace?!? sorry but really need more information, eventual we need a sample to reproduce...

[isaachinman]

Hi @nealoke. We're going to need more than a GIF to be able to help you with this. I am more than happy to try and debug your code, but you'd need to provide a full, working, reproducible repo for us to do so.

[isaachinman]

Also - for what it's worth this is almost certainly an implementation error, as the bare bones example definitely renders translated content during SSR. It looks like your GIF demonstrates locale switching on the _client side_, and has nothing to do with SSR, anyways?

Let us know if you have a public repo we can take a look at. Good luck!

[nealoke]

Thanks for the answers @jamuhl @isaachinman, and I understand that you need the code to debug, I'm preparing a repo to recreate my issue. Thanks for the effort 😄 !

Questions about the example

1. When I have a page which is class based and defines the static async getInitialProps method, it does not get fired when using the example. (see my fork)

A potential fix for this is doing the following in the _app.js but I'm unsure as the withI18next also tries to do this but doesn't actually work for class based components.

static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

    return {
        pageProps,
        initialLanguage: ctx.req.language ? ctx.req.language : translation.defaultLanguage
    };
}

1. For me it is unclear when the withI18next HOC should be used (defined in lib/withI18next). This because there is also a withI18n provided by the react-i18next package. And should it be only used once on the page or also on subcomponents such as a NavBar component?

2. Should the NamespacesConsumer wrap the Component in _app.js in order to properly work for sub components?

3. Should we not use a I18nextProvider to wrap our Component in _app.js?

[jamuhl]

1) guess we got an issue there with multiple places try to set the initialProps -> i think your fix might be right merging the ones set in withI18next and in _app.js

2) withI18next hoc should be used once on page level -> all components deeper nested should only use the with react-i18next provided HOC (withNamespaces) or render prop (NamespacesConsumer) -> withI18n works only if not loading translations via xhr - by passing them on init (so just forget about that hoc)

3) NamespaceConsumer is a render prop not a HOC so it can't wrap a component - it is used to access t functionality within a Component (like the new hooks - just not as nice)

4) I18nextProvider only passes i18n to context - so it's not needed in this sample

[nealoke]

@jamuhl Thanks for helping out 👍 , I think I've found out where the issue resides. I've created a very minimal repo for you to look at. Basically I have a Layout component which renders the NavBar component and children (which is the page that needs to be displayed).

When using withI18next for the page component it works fine and with SSR. The problem is that when I also want to translate stuff in the NavBar that it doesn't work as desired. Even if I wrap the Layout component with the withI18next HOC the translation doesn't render on the server (only on the client) because the getInitialProps is never called for the Layout component.

How would you suggest to do this in a way that it allows the SSR to work for the NavBar component?

[jamuhl]

Is the Layout part of the Page component? If so just use withNamespaces on the Layout instead of withI18next

@isaachinman i guess we should make the v10 very explicit on using the withSSR component only in one place (so not binding the getting t functionality to it)

[nealoke]

@jamuhl ... Yep that solved it! Thanks 🎉

[isaachinman]

HOC the translation doesn't render on the server (only on the client) because the getInitialProps is never called for the Layout component

Hi @nealoke. The getInitialProps util only works for page components. That is just how NextJs works.

@jamuhl Yes, agree.