I’m building an app with Express.js on the backend and two frontend clients. The web version uses React with Material-UI, and the mobile app is built with React Native.
I need to add multi-language support but I’m not sure where to implement it. Both Express and React have i18n libraries available.
I see three possible approaches:
- Server-side only - Handle all translations in Express using i18n middleware and store language files on the backend
- Client-side only - Use React i18n libraries and manage translations in each frontend app
- Hybrid approach - Mix both server and client localization
Can anyone with real-world experience share thoughts on which approach works best? I’m particularly interested in understanding the trade-offs for maintenance, performance, and overall architecture.
hmm, this is interesting! what kind of content are you planning to translate? is it mostly static UI text, or do you have dynamic content from databases too? that could really influence which approach makes sense for your setup.
Based on my experience with internationalization in applications like yours, I recommend handling it on the client-side. This approach allows React and React Native to manage translations, leading to improved performance as translations are loaded once at startup rather than making repeated server requests. Additionally, it simplifies maintenance since translation files reside within your frontend repositories, facilitating straightforward updates. Libraries such as React i18next provide robust support for pluralization and interpolation, plus features like lazy loading enhance user experience. While bundle size might be a concern, modern i18n tools effectively manage this through code splitting.
i’ve tried both too, and tbh client-side seems simpler! translation management feels smoother and you avoid the server cache hassle. best of luck with your project!