# gt-next: General Translation Next.js SDK: Contenido dinámico
URL: https://generaltranslation.com/es/docs/next/guides/dynamic-content.mdx
---
title: Contenido dinámico
description: Cómo traducir contenido en tiempo de ejecución con APIs de traducción del lado del servidor
---

La traducción de contenido dinámico se aplica a texto que no está disponible en tiempo de compilación: contenido generado por usuarios, respuestas de API o registros de bases de datos. Usa [`<Tx>`](/docs/next/api/components/tx) para contenido JSX y [`tx`](/docs/next/api/strings/tx) para cadenas simples, ambos solo del lado del servidor, por seguridad.

<Callout type="warn">
  **Úsalo con moderación:** La traducción dinámica consume cuota de API y añade latencia. Siempre que sea posible, prefiere los [componentes `<T>`](/docs/next/guides/t) con [componentes Variable](/docs/next/guides/variables).
</Callout>

## Cuándo usar la traducción dinámica

La traducción dinámica es 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 API externas**: datos de terceros, fuentes RSS, servicios externos
* **Registros de base de datos**: contenido dinámico de CMS, perfiles de usuario obtenidos de APIs
* **Datos en tiempo real**: notificaciones en tiempo real, mensajes de estado

### Evítalo en estos casos

* Nombres de usuario, números de cuenta → Usa [`<Var>`](/docs/next/api/components/var)
* Mensajes condicionales → Usa [componentes de rama](/docs/next/guides/branches)
* Validación de formularios → Usa [traducción de cadena](/docs/next/guides/strings)
* Configuración estática → Usa [cadenas compartidas](/docs/next/guides/shared-strings)

## inicio rápido

### Contenido JSX con Tx

```jsx
import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}
```


### Cadenas simples con tx

```jsx
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>`](/docs/next/api/components/tx) como [`tx`](/docs/next/api/strings/tx) solo están disponibles del lado del servidor por seguridad:

```jsx
// ✅ 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

```jsx
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 la API externa

```jsx
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

```jsx
import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Contenido estático con variables */}
      <T>
        <p><Var>{review.author}</Var> rated this <Var>{review.rating}</Var> stars</p>
      </T>
      
      {/* Contenido dinámico generado por el usuario */}
      <Tx>{review.content}</Tx>
    </div>
  );
}
```


## Problemas comunes

### Evita usarlo en exceso

No uses traducción dinámica para contenido que pueda usar componentes estándar:

```jsx
// ❌ Innecesario
const content = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Usa componentes Variable en su lugar
return (
  <T>
    <p>Hello, <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.

## Siguientes pasos

* [Guía de traducción local](/docs/next/guides/local-tx) - Gestiona las traducciones sin llamadas a la API
* [Guía de middleware](/docs/next/guides/middleware) - Detección de idioma y enrutamiento
* Referencias de la API:
  * [Componente `<Tx>`](/docs/next/api/components/tx)