动态内容
如何使用服务端翻译 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 = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;
// ✅ 使用变量组件代替
return (
<T>
<p>你好，<Var>{userName}</Var>！</p>
</T>
);API 配额影响
动态翻译会在每次请求中消耗 API 配额。在生产环境的应用中，请启用缓存并完善错误处理。
后续步骤
这份指南怎么样？