Translations not available on the server when server-side rendering React

[kvendrik]

Overview

Not all translations are available when the server-side render happens causing the UI to first render in english and then update on the client.

Consuming repo

What repo were you working in when this issue occurred?

Signage

Example here: https://github.com/Shopify/signage/compare/master...feature/i18n-no-server-access-repro. There's some clutter around it but not much is being rendered, have a look at App.tsx.

Checklist

• Please delete the labels section before submitting your issue
• I have described this issue in a way that is actionable (if possible)

[michenly]

I think this is actually expected. Since en is the only lang being sync load when using babel plugin.

To opt out of this behaviour, you can

1. put in your own useI18n arguments for the call that sync load the language you need.
2. use the mode: 'from-generated-index' to set which locale should be sync loaded per build.

[marutypes]

🤔 My understanding was that while it is true that en is the only language being synchronously loaded, that shouldn't matter on the server because we await the promises when we call extract during server rendering. Since the translations are treated as code I don't think it's any different than say an asynced component, which we know server renders fine because all our routes are asynced in most apps.

[michenly]

@TheMallen is right.
One major difference b/t the test branch you posted is that you are using your own I18nProvider (does not use extract for Serialize component ) instead of using I18nUniversalProvider (use extract for Serialize component).

I re-run the test again with your component vs I18nUniversalProvider and indeed fr show up correctly with I18nUniversalProvider.

I18nProvider

I18nUniversalProvider

Sorry I miss spoke before.

[kvendrik]

Fixed here with a small tweak to the universal provider code. I think this will work with the universal provider. Why it wasn't working before was because the locale wasn't consistent.

That's a separate issue though so I'll close this for now.

[michenly]

@kvendrik I think you can still use the universal provider and just pass in brochureLocale from the App

import {I18nUniversalProvider} from '@shopify/react-i18n-universal-provider';

export default function App({location}: {location?: string}) {
  const brochureLocale = useRequestHeader('X-Brochure-Locale');
...
   return(
      ...
     <I18nUniversalProvider locale={brochureLocale || 'en'}
      {your app}
     </I18nUniversalProvider>
      ...
   );
}

[kvendrik]

@michenly https://github.com/Shopify/signage/pull/84#issuecomment-635000156