What is the best practice to store multi language text in a react web site

Question

I am building a react website, and It has multiple localizations. What is the best practice to store ui texts for different languages? I am currently considering the two

• Store text in ui code, as an object variable or array, for multiple languages
  This way, I am fearing it could scatter the text in many files and could make the the site load slow since all the text is included with the code
• Storing in a static JSON file in a server directory
  This way I am fearing with many components requesting their texts, it would appear bad with text loading slowly on every page. I might make it fetch all once for all component, but that would seriously hinder the modularity.

What is the best practice to implement text storage for multiple localization react app?

Answer 1

First, you need to use npm packages i18next react-i18next

Here is good tutorial how to do it

https://www.mindbowser.com/adding-multi-language-support-using-reactjs/

You should save as local Json, no need for static translation to be served from server.