# 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 runtime con APIs de traducción del lado del servidor
---

La traducción de contenido dinámico se aplica al texto que no está disponible en tiempo de construcció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 de texto simples; ambos solo del lado del servidor por seguridad.

<Callout type="warn">
  **Úsalo con moderación:** La traducción dinámica consume cuota de la API y añade latencia. Siempre que sea posible, prioriza los [componentes `<T>`](/docs/next/guides/t) con [componentes de 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 construcció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, feeds RSS, servicios externos
* **Registros de bases de datos**: Contenido dinámico de CMS, perfiles de usuario obtenidos de APIs
* **Datos en tiempo real**: Notificaciones en vivo, 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 ramificación](/docs/next/guides/branches)
* Validación de formularios → Usa [traducción de cadenas](/docs/next/guides/strings)
* Configuración estática → Usa [cadenas compartidas](/docs/next/guides/shared-strings)

## Guía rápida

### Contenido en 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 motivos de 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 del usuario */}
      <Tx>{review.content}</Tx>
    </div>
  );
}
```


## Uso en ruta de API

[`tx`](/docs/next/api/strings/tx) funciona en los manejadores de solicitud de las ruta de API de Next.js, no solo en los componentes del servidor:

```tsx
// app/api/translate/route.ts
import { tx } from 'gt-next/server';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { text, locale } = await request.json();
  const translated = await tx(text, { locale });
  return NextResponse.json({ translated });
}
```

Esto resulta útil cuando necesitas exponer la traducción como un endpoint de API — por ejemplo, para dar servicio a componentes cliente o a servicios externos.


## Patrón de traducción del lado del cliente

Como [`tx`](/docs/next/api/strings/tx) solo funciona en el servidor, los componentes del cliente pueden traducir contenido dinámico llamando a una ruta de API como proxy:

```tsx
'use client';

async function translateText(text: string) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text, locale: 'fr' }),
  });
  const { translated } = await res.json();
  return translated;
}
```

Esto, junto con la [ruta de API anterior](#api-route-usage), permite que los componentes cliente accedan a la traducción dinámica.


## Traducir varios elementos

Usa `Promise.all` para traducir arrays de contenido en paralelo:

```tsx
import { tx } from 'gt-next/server';

const translatedPosts = await Promise.all(
  posts.map(async (post) => ({
    ...post,
    title: await tx(post.title),
  }))
);
```

Esto resulta útil para traducir listas de registros de bases de datos, respuestas de API o cualquier colección de cadenas dinámicas.


## Problemas frecuentes

### Evita usarla en exceso

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

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

// ✅ Usa componentes de 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 caché y manejo de errores en aplicaciones de producción.

## Siguientes pasos

<Callout>
  **Míralo en acción:** Echa un vistazo a la [aplicación de ejemplo de contenido dinámico](https://github.com/gt-examples/dynamic-content-tx) para ver una demostración funcional de `tx()` y `<Tx>` — [vista previa en directo](https://dynamic-content-tx.generaltranslation.dev).
</Callout>

* [Guía de traducción local](/docs/next/guides/local-tx) - Gestiona las traducciones sin hacer 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)