Production vs Development
Differences between production and development environments
Overview
gt-react behaves differently depending on the environment your React application is running in.
It detects the environment by checking the NODE_ENV environment variable.
Production Behaviour
Environment variables
In production, the only accepted environment variable is GT_PROJECT_ID (or a prefixed variant, such as NEXT_PUBLIC_GT_PROJECT_ID).
If an API key is supplied as an environment variable, gt-react will throw an error. This is to prevent API keys from being exposed to the client.
Translation Loading Behaviour
In production, the gt-react provider will, by default, attempt to load translations from the General Translation CDN.
If you have configured custom translation loading behaviour, such as local translations, via the loadTranslations function, gt-react will use that instead.
Hot reloading of translations is disabled in production.
Development Behaviour
Environment variables
As development is local and not exposed to external users, gt-react will accept any General Translation environment variables, even if they are prefixed with NEXT_PUBLIC_, VITE_ (or similar).
Translation Loading Behaviour
In development, the gt-react provider will first attempt to load translations in the same way as in production.
These translations are loaded into memory.
When rendering a component (that uses useGT, <T>, or useTranslations) in a language different from the default, the gt-react provider will do the following:
- If it detects a valid, stored translation for the given content, it will render the translation.
- If no translation is found, it will attempt to dynamically translate the content via the General Translation API.
- After translating, the translation will be rendered and stored in memory for future use.
- If the translation times out, it will fall back to rendering the original content.
Our API also internally caches development translations for a short period, so if the same translation is requested again, it will be served from cache.
These translations are isolated at the project level, so they will not be mixed up with translations from other projects. Additionally, the cache is unique to development sessions, so cached translations will not be used in production.
gt-react will detect changes to components that use useGT, <T>, or useTranslations and will dynamically translate the modified content via our API.
Production vs Development API Keys
To help distinguish between production and development behaviour in gt-react, we use the concepts of “Production API Keys” and “Development API Keys”.
Production API Keys
Production API keys are API keys beginning with gtx-api-.
When a Production API key is provided, gt-react will behave as described in the Production Behaviour section.
This means that if you are running your React application in development mode and you provide a Production API key, gt-react will behave as if you are in production. Translation hot reloading will be disabled, and components without translations will render the original content.
Other than this behaviour, gt-react will not utilise the Production API key in any way.
We ask you to create a separate production API key when deploying to production because the CLI tool only accesses Production API keys.
The CLI tool will apply billing and rate limiting using the "production" category.
Development API keys
Development API keys are API keys that begin with gtx-dev-.
When a Development API key is provided, gt-react will behave as described in the Development behaviour section.
When using a Development API key, billing and rate limiting will be applied under the "development" category.
Translations created with a Development API key will not be stored and will not be available for use in production.
Development translations exist to let you test your application before shipping to production.
How is this guide?