Gatsby: How render translations during build time with i18n

[Lidofernandez]

Hi,

I'm trying to add i18n to my website but I can't make it so the translations are added during build time, checking on the network tab all the translations are bundled afterward. That means that the page has no content.

I've created a repo to check if maybe I'm doing something wrong: [email protected]:Lidofernandez/gatsby-i18n.git

[pieh]

You are using https://www.npmjs.com/package/i18next-xhr-backend which is actually doing that. You'll need to switch to either different backend for i18next if available or different i18n package

[Lidofernandez]

hi @pieh ,

I've just followed the example that is in the gatsby website: https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/ (they're using the same back-end). Actually I wasn't sure if I should report this as a bug, because I tried with different backends before asking this question with no results.

I can upload another example with a different backend but the result is actually the same, have you tried to build your page with i18n and add translations during build time?

[pieh]

Oh, I wasn't aware - then did you check SSR section in that post - https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/#ssr which possibly should handle build time?

[Lidofernandez]

Hi @pieh yeah I also checked that, but it seems that there is no other option but to go with ssr, It's actually very disappointing that the translations can't be added during build time, I thought that was the advantage of a static site generator, specially when in my scenario I would specifically add which language I want to use :( :( :(

Also I'm not sure if this ticket should be closed maybe somebody knows the answer to this question or has a better understanding? I can't believe I'm the only one having this issue

[pieh]

SSR in context of gatsby is build time rendering :) gatsby-ssr.js is to manipulate / enrich resulting static html files. So please recheck that section in that blog post, add that code snippet to your project, do gatsby build and see if it actually fixes issue for you.

[Lidofernandez]

Hi @pieh I definitely think that this question should still be open because not only the example of that project is very incomplete but I had to make quite some extra changes in order to use i18n in the SSR part, as you can see in my last commit https://gitlab.com/Lidofernandez/gatsby-i18n/commit/70869612c3a13d1a4b0d4f4f94192753e000c130 when I run the build I'm able to at least load the namespaces but still the translations are loaded in the client.

[gpbl]

@Lidofernandez did you make some progress with this? Sure the method described here: https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/ doesn't work. I see however a note saying:

translate hoc from react-i18next cause page / component not able to SSR. I make it works by import i18n & use i18n.t

What does it mean? What should I import?

[Lidofernandez]

Hi no I couldn’t make it work but I’d would advice you to not use Gatsby if you need to translate a lot of pages or you will run out of memory, for instance: in my case I had to translate 500 pages in EN, ES, FR, NL and GR so 500 x 5 I run out of memory once I reached around 1200. As I work around I have to make 5 config files and 5 different deployment pipelines for the CI, but perhaps I’m doing something wrong?

[gpbl]

No idea @Lidofernandez about your issue 😶

I'm evaluating https://github.com/angeloocana/gatsby-plugin-i18n for solving i18n with SSR

[wiziple]

I solved this issue through react-intl. (https://gatsby-starter-default-intl.netlify.com)
You can check my starter if you are interested in. https://github.com/wiziple/gatsby-starter-default-intl

[dgopsq]

I have this problem too, is there a way to use i18next with SSR?

[jb-san]

@dgopsq I created a starter that handles the SSR portion of i18next https://github.com/jb-san/gatsby-starter-i18next, hope it can help

[acewf]

@jb-san seems you didn't understand the issue.
your repo doesn't write the translation into the html file,
the translation just works on the client side.

[jaymdq]

Any update on this? I have the same problem
I also followed the step by step at https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/
gatsby develop works quite fine, but gatsby build fails
We are lacking some good example for i18next + SSR

[acewf]

Hi @jaymd, from my understanding you can do in couple of ways..

• first using graphql to get your data, then it passes down to your page as a prop.

I have used a second option, more suitable to the project I am working because I don't want to use the same graphql query in every page, I did:

• on gatsby-node.js I load the content, in my case translations file for each locale.
  Then on page create method .. I delete the current page,
  and then create the same page for each locale, on each of these pages adding to the context the data.

If I fail to explain myself, I can try to provide some examples..

Good luck

[jaymdq]

Hey @acewf , thanks for replying!
I will try to do the second option, if you have some code snippet for sharing about the page create method that would be really helpful.

[acewf]

hi @jaymdq

created a gist copied from my project, you will need to install gatsby-i18n
https://gist.github.com/acewf/e7f183a0cbc38b6dcd6581bdc10ed9ee

[guibulator]

@acewf
I created a repo based on your gist with latest packages. I had some issues because I didn't know the packages' versions you were using. Hope it's alright with you -> gatsby-starter-i18next-ssr