i18n translations in Server Components

[ghost]

Hey everyone!

As someone relatively new to React, I'm currently playing with hydrogen and trying to translate strings in some server components but hitting a wall.
I started from the provided i18n example (https://github.com/Shopify/hydrogen/tree/v1.x-2022-07/examples/i18n) with react-i18next, but the useTranslation hook is only available in client components. I tried to use the Trans component which is working but I get a Warning: Only ServerContext is supported in Flight in the logs, should it be ignored ?
I looked into the useSSR hook (https://react.i18next.com/latest/ssr) but couldn't wrap my head around how to use it in hydrogen.

Some help would be appreciated, thanks!

[lordofthecactus]

👍 Thanks for your feedback @jeremie-solios, definitely we need to provide more examples and plugins for i18n cases in the server. cc @benjaminsehl

[dduupp]

@lordofthecactus any progress on this one? Looking for examples on how to make packages like react-i18next or @shopify/react-i18n work in Hydrogen.

[blittle]

Hello everyone! A few thoughts:

1. react-i18next and @shopify/react-i18n are traditional react libraries, so they should work fine within client components. The i18n example showcases just that, using a 3rd party library.
2. Server components have special constraints, so many 3rd party libraries won't work. For example server components don't support useState or context.
3. Hydrogen has built in primitives for handling i18n in server components. Read the guide here: https://shopify.dev/custom-storefronts/hydrogen/framework/internationalization. Note, the useLocalization() hook that hydrogen provides can be used in both client and server components. It's also important to utilize these primitives to make the storefront API responses have localized currency.
4. The default demo store has an end-to-end i18n flow and I recommend understanding how it works. It has a country selector, the locale persisted in the URL path, and localized currency. The only thing it does not have is translations, which shouldn't be too hard to add. See how the locale is matched on the URL path, and then useLocalization() is used throughout the tree.

[bitforcesrl]

the @context query it's cool and the useLocalization() as well but we need a way to translate labels in server components too. could you please suggest a react link that works with hydrogen server components?
We can create a custom helper that reads and parse the dictionary but would be better to use a common lib for client and server components.
thanks!