# gt-react: General Translation React SDK: Production vs Development URL: https://generaltranslation.com/en-GB/docs/react/concepts/environments.mdx --- title: Production vs Development description: Differences between production and development environments --- {/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */} ## 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 version, such as `NEXT_PUBLIC_GT_PROJECT_ID`). If an API key is provided 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 attempt to load translations from the General Translation CDN by default. If you have configured custom translation loading behaviour, such as local translations, via the `loadTranslations` function, `gt-react` will use that instead. Translation hot reloading is disabled in production. ## Development behaviour ### Environment variables Since development is local and not exposed to users in other locales, `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`, ``, or `useTranslations`) in a language other than the default, the `gt-react` provider will do the following: 1. If it detects a valid, stored translation for the given content, it will render the translation. 2. If no translation is found, it will attempt to translate the content dynamically via the General Translation API. 3. After translating, the translation will be rendered and stored in memory for future use. 4. 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 the 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`, ``, or `useTranslations` and will translate the modified content dynamically via our API. ## Production vs development API keys [#api-keys] To help distinguish between the production and development behaviour of `gt-react`, we use the terms "Production API Keys" and "Development API Keys". ### Production API keys Production API keys are API keys that begin with `gtx-api-`. When a Production API key is provided, `gt-react` will behave as described in the [Production Behaviour](#production-behavior) section. This means that if you are running your React application in development mode and 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. Aside from this behaviour, `gt-react` will not use the Production API key in any way. The reason we ask you to create a separate production API key when shipping to production is that the CLI tool only accesses Production API keys. The CLI tool will apply billing and rate limiting under the "production" category. ### Development API keys Development API keys are API keys beginning with `gtx-dev-`. When a Development API key is provided, `gt-react` will behave as described in the [Development Behaviour](#development-behavior) section. When using a Development API key, billing and rate-limiting will be applied using the "development" category. Translations created with a Development API key will not be stored, and will not be available for use in production. The purpose of development translations is to allow you to test your application before deploying to production.