Contenido dinámico
Cómo traducir contenido en tiempo de ejecución usando API de traducción del lado del servidor
La traducción de contenido dinámico gestiona texto que no está disponible en tiempo de compilación—contenido generado por usuarios, respuestas de API o registros de base de datos. Usa <Tx> para contenido JSX y tx para cadenas de texto, ambos solo del lado del servidor por seguridad.
Úsalo con moderación: La traducción dinámica consume cuota de API y añade latencia. Prefiere componentes <T> con componentes de variables siempre que sea posible.
Cuándo usar la traducción dinámica
La traducción dinámica se utiliza para contenido que realmente no puede conocerse en tiempo de compilación:
Casos de uso adecuados
- Contenido generado por usuarios: Mensajes de chat, reseñas, publicaciones en redes sociales
- Respuestas de APIs externas: Datos de terceros, RSS, servicios externos
- Registros de base de datos: Contenido dinámico de CMS, perfiles de usuario desde APIs
- Datos en tiempo real: Notificaciones en vivo, mensajes de estado
Evita en estos casos
- Nombres de usuario, números de cuenta → Usa
<Var> - Mensajes condicionales → Usa componentes de ramificación
- Validación de formularios → Usa traducción de strings
- Configuración estática → Usa strings compartidos
Comenzar rápido
Contenido de JSX con <Tx>
import { Tx } from 'gt-next';
async function UserPost({ postContent }) {
return (
<article>
<Tx>{postContent}</Tx>
</article>
);
}Cadenas de texto simples con tx
import { tx } from 'gt-next/server';
async function NotificationBanner({ message }) {
const translatedMessage = await tx(message);
return (
<div className="banner">
{translatedMessage}
</div>
);
}Solo del lado del servidor
Tanto <Tx> como tx son solo del lado del servidor por motivos de seguridad:
// ✅ Componente del servidor
async function ServerComponent() {
const translated = await tx(dynamicContent);
return <div>{translated}</div>;
}
// ❌ Componente del cliente - no funcionará
'use client';
function ClientComponent() {
const translated = await tx(dynamicContent); // ¡Error!
return <div>{translated}</div>;
}Ejemplos
Contenido generado por el usuario
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>
);
}Datos de API externa
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>
);
}Contenido mixto
import { T, Tx, Var } from 'gt-next';
async function ProductReview({ review }) {
return (
<div>
{/* Contenido estático con variables */}
<T>
<p><Var>{review.author}</Var> calificó esto con <Var>{review.rating}</Var> estrellas</p>
</T>
{/* Contenido dinámico del usuario */}
<Tx>{review.content}</Tx>
</div>
);
}Problemas frecuentes
Evita el uso excesivo
No utilices traducción dinámica para contenido que puede emplear componentes estándar:
// ❌ Innecesario
const content = `¡Hola, ${userName}!`;
return <Tx>{content}</Tx>;
// ✅ Usa componentes de variable en su lugar
return (
<T>
<p>¡Hola, <Var>{userName}</Var>!</p>
</T>
);Impacto en la cuota de la API
La traducción dinámica consume cuota de la API en cada solicitud. Usa almacenamiento en caché y manejo de errores en aplicaciones de producción.
Próximos pasos
- Guía de traducción local - Gestiona traducciones sin llamadas a la API
- Guía de middleware - Detección de idioma y enrutamiento
- Referencia de API:
¿Qué te ha parecido esta guía?