# How to Translate a React App (and Rank For It) | Vitra.ai > React renders in the browser, so translated text can be invisible to search engines. That is the difference between a localized app and a localized site. **Canonical URL**: https://www.vitra.ai/general/translate-a-react-app **Source**: This is the Markdown rendering of https://www.vitra.ai/general/translate-a-react-app, generated at build time from that page. --- 4 min read # How to Translate a React App (and Rank For It) React renders in the browser, so translated text can be invisible to search engines. That is the difference between a localized app and a localized site. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Senior Product Manager , Vitra.ai Updated Aug 17, 2026 ![How to Translate a React App (and Rank For It)](https://www.vitra.ai/static/images/blog/translate-a-react-app.jpg) Table of contents [The question is whether it needs to rank](#the-question-is-whether-it-needs-to-rank) [Inside the app: the standard setup](#inside-the-app-the-standard-setup) [Interpolation and rich text](#interpolation-and-rich-text) [Plurals and dates](#plurals-and-dates) [For the public site](#for-the-public-site) [Keeping strings and code in step](#keeping-strings-and-code-in-step) [Testing translated interfaces](#testing-translated-interfaces) [Bundle size and the language list](#bundle-size-and-the-language-list) [Where to start](#where-to-start) [FAQ](#faq) Contributors [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Senior Product Manager Subscribe to our newsletter Subscribe > **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](https://www.vitra.ai/features/website-translation) in front so the HTML served already contains the target language. Either way each language needs its own URL, reciprocal [hreflang](https://www.vitra.ai/general/multilingual-sitemaps) 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](https://www.vitra.ai/features/translation-memory) means each release only pays for genuinely new strings, and [quality control](https://www.vitra.ai/features/quality-control) verifies the interpolation tokens survived. Setup notes are on the [React integration](https://www.vitra.ai/integration/reactjs) 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. Our blog ## Lastest blog posts Tool and strategies modern teams need to help their companies grow. Automotive [Automotive Brochure Localization by Market](https://www.vitra.ai/automotive/automotive-brochure-localization) A car brochure is a spec grid, a legal footer and a photo library, all market-specific. What actually has to change, and why the layout decides the schedule. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 Automotive [Automotive Campaign Localization Across Markets](https://www.vitra.ai/automotive/automotive-campaign-localization) Campaigns run through national companies and dealer networks, so one master becomes hundreds of files. Where the offer text and the disclaimers actually break. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 Automotive [Car Service Manual Translation for Technicians](https://www.vitra.ai/automotive/automotive-service-manual-translation) A workshop manual is read mid-repair by someone with the car on a lift. What that demands of procedures, torque figures and fault codes, in every language. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 [View all posts](https://www.vitra.ai/blog/page/1) --- ## Structured data ```json { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.vitra.ai/general/translate-a-react-app" }, "headline": "How to Translate a React App (and Rank For It)", "image": [ { "@type": "ImageObject", "url": "https://www.vitra.ai/static/images/blog/translate-a-react-app.jpg" } ], "datePublished": "2026-08-17T00:00:00.000Z", "dateModified": "2026-08-17T00:00:00.000Z", "author": [ { "@type": "Person", "name": "Samhitha J Bhatt" } ], "publisher": { "@type": "Organization", "name": "Vitra.ai", "logo": { "@type": "ImageObject", "url": "https://www.vitra.ai/static/images/vitra-v-logo.png" } }, "description": "React renders in the browser, so translated text can be invisible to search engines. That is the difference between a localized app and a localized site." } ``` ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.vitra.ai" }, { "@type": "ListItem", "position": 2, "name": "General", "item": "https://www.vitra.ai/general" }, { "@type": "ListItem", "position": 3, "name": "How to Translate a React App (and Rank For It)", "item": "https://www.vitra.ai/general/translate-a-react-app" } ] } ``` ```json { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "How do I translate a React app?", "acceptedAnswer": { "@type": "Answer", "text": "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." } }, { "@type": "Question", "name": "Why does my translated React site get no search traffic?", "acceptedAnswer": { "@type": "Answer", "text": "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." } }, { "@type": "Question", "name": "How should text with links inside it be translated?", "acceptedAnswer": { "@type": "Answer", "text": "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." } }, { "@type": "Question", "name": "Should plurals be handled manually?", "acceptedAnswer": { "@type": "Answer", "text": "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." } } ] } ```