How to get astro-i18next to work in React Components inside Astro

[bobcafedev]

What works inside .astro components doesn't in React components (.tsx) in SSR mode. Is there any plan to make it work ? or some work around ?

[yassinedoghri]

Hey, thanks for the issue. I've setup an example for react using the react-i18next plugin.

Here's the stackblitz: https://stackblitz.com/edit/github-xdzdkv?file=src/components/Counter.tsx

It doesn't work because i18next is only initialized server side.

Getting these errors:

So when using the client:visible directive, the react component cannot locate the translation string. astro-i18next may need to load i18next both on client and server side.

[selemessaied]

astro-i18next may need to load i18next both on client and server side.

Any ideas on how to achieve this?

[riolly]

And also, what about other frameworks like solidjs etc?

[yassinedoghri]

Any ideas on how to achieve this?

I've started implementing client side translations, I've created some example folders on the develop branch (including react). Trying things out for now.

And also, what about other frameworks like solidjs etc?

I think my experimenting with react will solve the same issues for other frameworks. Basically, frameworks render client side js, so the i18next instance should exist client side as well to retrieve translation keys.

It's not ideal to have all translations handled client side in my opinion because it would hurt SEO. So I'll have to think of ways to make SSR and client side rendering work together for i18n.

I have some questions that need more investigating:

• Would SSR and client side i18next instances share the same config? Same plugins?
• Should they both load the same translation keys? (some keys are likely to be used only on SSR, and others for client side)

Anyways, thank you for your interest. If you have any insight, I'm all ears!

[riolly]

On astro docs website, they create dedicated pages for each translation (using md files). Only the UI part that using the translation key. And I will follow that convention.

[github-actions[bot]]

:tada: This issue has been resolved in version 1.0.0-beta.13 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: