Contenido dinámico
Cómo traducir contenido en tiempo de ejecución con 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 el usuario, respuestas de API o registros de base de datos. Usa <Tx> para contenido JSX y tx para cadenas simples, 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 del CMS, perfiles de usuario desde APIs
- Datos en tiempo real: Notificaciones en tiempo real, 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>
);
}Strings 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 en el servidor
Tanto <Tx> como tx se ejecutan únicamente en el servidor por motivos de seguridad:
// ✅ Componente de servidor
async function ServerComponent() {
const translated = await tx(dynamicContent);
return <div>{translated}</div>;
}
// ❌ Componente de cliente - no funcionará
'use client';
function ClientComponent() {
const translated = await tx(dynamicContent); // ¡Error!
return <div>{translated}</div>;
}Ejemplos
Contenido generado por usuarios
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> valoró este producto 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 uses traducción dinámica para contenido que pueda usar componentes estándar:
// ❌ Innecesario
const content = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;
// ✅ Usa componentes 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 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 parece esta guía?