动态内容
如何使用服务端翻译 API 处理运行时内容
动态内容翻译用于处理构建时不可用的文本，例如用户生成内容、API 响应或数据库记录。JSX 内容使用 <Tx>，纯字符串使用 tx；二者均仅限在服务端使用以确保安全。
何时使用动态翻译
动态翻译适用于在构建阶段确实无法预先确定的内容：
适用场景
- 用户生成内容：聊天消息、评价、社交帖子
- 外部 API 响应：第三方数据、RSS 订阅源、外部服务
- 数据库记录：动态 CMS 内容、来自 API 的用户资料
- 实时数据：即时通知、状态消息
以下情况请避免使用
快速上手
使用 <Tx> 的 JSX 内容
import { Tx } from 'gt-next';
async function UserPost({ postContent }) {
return (
<article>
<Tx>{postContent}</Tx>
</article>
);
}使用 tx 处理纯文本字符串
import { tx } from 'gt-next/server';
async function NotificationBanner({ message }) {
const translatedMessage = await tx(message);
return (
<div className="banner">
{translatedMessage}
</div>
);
}仅限服务端
// ✅ 服务器组件
async function ServerComponent() {
const translated = await tx(dynamicContent);
return <div>{translated}</div>;
}
// ❌ 客户端组件——无法工作
'use client';
function ClientComponent() {
const translated = await tx(dynamicContent); // 错误！
return <div>{translated}</div>;
}示例
用户生成内容
import { Tx } from 'gt-next';
async function ChatMessage({ message }) {
return (
<div className="chat-message">
<div className="author">{message.author}</div>
<Tx>{message.content}</Tx>
</div>
);
}外部 API 数据
import { tx } from 'gt-next/server';
async function NewsArticle({ article }) {
const translatedTitle = await tx(article.title);
return (
<article>
<h1>{translatedTitle}</h1>
<p>{article.publishedAt}</p>
</article>
);
}混合内容
import { T, Tx, Var } from 'gt-next';
async function ProductReview({ review }) {
return (
<div>
{/* 含变量的静态内容 */}
<T>
<p><Var>{review.author}</Var> 给予了 <Var>{review.rating}</Var> 星的评价</p>
</T>
{/* 动态用户内容 */}
<Tx>{review.content}</Tx>
</div>
);
}常见问题排查
避免过度使用
对于可以使用标准组件的内容，请不要使用动态翻译：
// ❌ 多余
const content = `你好，${userName}！`;
return <Tx>{content}</Tx>;
// ✅ 请改用变量组件
return (
<T>
<p>你好，<Var>{userName}</Var>！</p>
</T>
);API 配额影响
动态翻译会在每次请求时消耗 API 配额。在生产环境的应用中请使用缓存并做好错误处理。
后续步骤
本指南如何?