I have recently been exploring a similar concept, although my project does not involve SSR. I have discovered that combining dynamic import syntax with React's Suspense component has helped me achieve the desired outcome in my scenario. Results may vary depending on whether you require SSR, but here is a general overview of what has worked for me:
// Implement this structure in your JSX within App.js:
<React.Suspense fallback={<SomeLoadingComponent />}>
<AsyncIntlProvider>
{/* Place app child components here */}
</AsyncIntlProvider>
</React.Suspense>
// Additional support can be implemented as follows,
// and can be stored in another file
// Simply import AsyncIntlProvider in App.js
const messagesCache = {};
const AsyncIntlProvider = ({ children }) => {
// Adjust the logic to retrieve your app's locale information
// If based on something like useState, it should trigger a re-render and load new message bundle when the locale changes
const locale = getLocale();
const messages = getMessages(locale);
return (
<IntlProvider locale={locale} messages={messages}>
{children}
</IntlProvider>
);
};
function getMessages(locale) {
if (messagesCache[locale]) {
return messagesCache[locale];
}
// Suspense relies on ErrorBoundary
// Throwing a promise will result in rendering <SomeLoadingComponent /> until the promise resolves
throw loadMessages(locale);
}
async function loadMessages(locale) {
// Utilizing dynamic import syntax prompts webpack to split this module into its own chunk
const messages = await import('./path/to/${locale}.json`);
messagesCache[locale] = messages;
return messages;
}
Make sure that Webpack separates each locale JSON file into its individual chunk. Failure to do so might indicate that the dynamic import syntax is being transpiled to a different module system (require, etc.) before reaching webpack. For instance, when using Typescript, tsconfig requires "module": "esnext" to preserve the import() syntax. Babel might also attempt module transpilation.
The resulting chunk for a single locale could resemble the following structure:
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
/***/ "./path/to/en-US.json":
/*!*************************************!*\
!*** ./path/to/en-US.json ***!
\*************************************/
/*! exports provided: message.id, default */
/***/ (function(module) {
eval("module.exports = JSON.parse(\"{\\\"message.id\\\":\\\"Localized message text\\\"}\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvbG9jYWxpemF0aW9uL2VuLVVTLmpzb24uanMiLCJzb3VyY2VzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./path/to/en-US.json\n");
/***/ })
}]);
I trust this information proves helpful as you embark on internationalizing your project! 😁