# General Translation Changelog: gt-react 10.19.0: SPA 翻译热重载
URL: https://generaltranslation.com/zh/blog/gt-react_v10_19_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-16

import Video from '@/components/Video';

<Video src="https://assets.gtx.dev/devlogs/gt-react-browser-tx-hot-reload.mp4" />

## 概览

`gt-react/browser` 现在支持开发环境下的译文热重载。此前，每次你在浏览器端 GT 应用中修改代码后，都必须重新运行翻译命令才能看到更新后的译文。在此版本中，译文会在开发期间于 runtime 预先计算——不再需要手动重新翻译。

这让 `gt-react/browser` 与标准 `gt-react` 的翻译工作流保持一致。请注意，`gt-react/browser` **仅适用于单页应用 (SPA)&#x20;**——如果你使用的是**服务器端渲染**框架，请使用 `gt-react` (不要使用 `gt-react/browser`) 。此功能也**仅限开发环境**——生产环境 build 仍会像以前一样使用预先计算的译文。

## 工作原理

编译器插件 会在模块级别注入 runtime 翻译调用。在这些调用解析完成之前，rendering 会被挂起。

启用 `devHotReload` 后，编译器会添加 `GtInternalRuntimeTranslateString` 和 `GtInternalRuntimeTranslateJsx` 调用，在模块加载时预热翻译缓存。对于 JSX，译文也可以通过 [`<T>`](/docs/react/reference/components/t) 组件自身内部的 Suspense 调用来解析，而不是在模块级别加载。

由于译文是在 runtime 获取的，因此只有用户实际访问的语言才会被翻译——不同于 build-time 方案，后者即使你从未查看过，也必须在每次开发 build 时为每个已配置的语言生成译文。

在 runtime 获取的译文会缓存在 localStorage 中，因此刷新页面后仍会保留。

## 配置

### 1. 添加编译器插件

开发环境的热重载需要 GT 编译器插件。如果你还没添加，请将它加入 bundler 配置中——例如 Vite plugin：

```ts
// vite.config.ts
import { vite as gtCompiler } from "@generaltranslation/compiler";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import gtConfig from './gt.config.json';

export default defineConfig({
  plugins: [react(), gtCompiler({ gtConfig })],
});
```

其他 bundler 的相关信息，请参阅 [`gt-react` SPA Quickstart](/docs/react/react-spa-quickstart)。

### 2. 在 `gt.config.json` 中启用开发环境热重载

```json
{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}
```

默认情况下，`devHotReload: true` 会为字符串启用热重载，但不会为 JSX 启用。之所以默认关闭 JSX，是因为 [`<T>`](/docs/react/reference/components/t) 组件已经会通过 Suspense 在 runtime 处理 JSX 的翻译，因此无需阻塞模块加载来等待它们完成解析。如有需要，你也可以分别对它们进行设置：

```json
{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": {
          "strings": true,
          "jsx": false
        }
      }
    }
  }
}
```

### 3. 将凭据传给 `bootstrap()`

你还需要将项目 ID、开发用 API 密钥以及 [`loadTranslations`](/docs/react/reference/functions/load-translations) 函数直接传给 `bootstrap()` 调用。这是当前实现的一个小限制，我们计划在未来的版本中将其简化。

```tsx
await bootstrap({
  ...gtConfig,
  loadTranslations,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
});
```

## 相关链接

* [上一篇开发日志：弃用 React 上下文 (gt-react@10.12.0) ](/devlog/gt-react_v10_12_0)
* [PR #1217](https://github.com/generaltranslation/gt/pull/1217)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.