How to Translate a React App (and Rank For It)

Quick answer — React translation splits in two. Inside an authenticated app, a library like react-i18next is enough. On a public marketing site, client-side rendering means search engines may never see the translated text, and that needs server rendering or a translation layer.

The question is whether it needs to rank

An internal dashboard or a logged-in product needs the interface translated and nothing more. Nobody is searching for it. A public-facing React site is a different problem. If the translated text only exists after JavaScript executes, the crawler may index an English shell, and all the localization work earns no organic traffic at all.

Decide which of the two you are building before choosing a library.

Inside the app: the standard setup

A provider at the root, JSON resource files per language, a hook to read strings and an interpolation syntax for variables. That is the shape of every React i18n library and they differ mostly in ergonomics.

Two things to get right early. Namespacing, so one enormous translation file does not become the bottleneck for every team. And lazy loading, so a user in one language does not download the strings for fourteen others.

Interpolation and rich text

Hello {{name}} is straightforward. Text with a link or bold in the middle of a sentence is not, because the markup cannot be split across the translation without breaking word order in other languages. Use the component-interpolation pattern the library provides rather than concatenating JSX around translated fragments. Concatenation produces sentences that cannot be reordered, which is the most common cause of stilted translated UI.

Plurals and dates

Delegate both to Intl. Hand-rolled plural logic breaks for languages with more than two forms, and hand-formatted dates are the other half of an interface that reads as foreign despite being translated.

For the public site

Server-render the translated markup, or put website translation in front so the HTML served already contains the target language. Either way each language needs its own URL, reciprocal hreflang and a self-referencing canonical.

Route-based language — /fr/pricing — is the version search engines can work with. A context value set from a cookie is not.

Keeping strings and code in step

Extraction from source keeps the catalogue honest. Adding a string without adding it to the catalogue should fail CI, otherwise the default language quietly becomes the fallback for everything nobody remembered.

translation memory means each release only pays for genuinely new strings, and quality control verifies the interpolation tokens survived.

Setup notes are on the React integration page.

Testing translated interfaces

A component test asserting on English text breaks the moment a translation is introduced. Mock the translation function to return the key rather than the string, and assert on keys.

That keeps the test suite language-independent and turns a missing key into a test failure instead of a screen showing a raw identifier in production.

Bundle size and the language list

Every language shipped in the main bundle is downloaded by every user. Split by locale and load on demand, or a user in one language pays for thirteen they will never see.

Where to start

Render one page in the target language and view source. If the translated text is in the HTML, search engines can read it. If it only appears after hydration, it is a client-side render and needs the server side solved first.

FAQ

How do I translate a React app? With a provider at the root, per-language JSON resources and a hook to read strings. The bigger decision is whether the app needs to rank, because client-rendered text may never be seen by a crawler.

Why does my translated React site get no search traffic? Because the translated text only exists after JavaScript runs. A crawler can index an English shell, so the site needs server rendering or a translation layer that serves translated HTML directly.

How should text with links inside it be translated? Through the library's component-interpolation pattern rather than by concatenating JSX around fragments. Concatenation locks word order, which is the usual cause of stilted translated interfaces.

Should plurals be handled manually? No, delegate to Intl. Hand-rolled plural logic assumes two forms and breaks in languages that have more, and the same applies to hand-formatted dates and numbers.