# General Translation React SDKs (gt-react, gt-next, gt-react-native): Componentes de servidor URL: https://generaltranslation.com/es/docs/react/nextjs/server-components.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduce contenido en React Server Components con General Translation y entiende cómo se comporta gt-next en componentes de servidor y componente cliente. En el App Router de Next.js, `gt-next` funciona tanto en React Server Components (RSC) como en componente cliente. El mismo componente [``](/docs/react/reference/components/t) y los hooks de traducción se importan desde `gt-next` en ambos casos, y la biblioteca elige la implementación adecuada para cada entorno. Las funciones asíncronas del App Router están en el punto de entrada `gt-next/server`, que no funciona con el Pages Router. Lee esta página para entender dónde se ejecuta la traducción y qué importaciones están disponibles en cada tipo de componente. Para las páginas de referencia de APIs de servidor concretas, empieza por [`getGT`](/docs/react/nextjs/reference/functions/get-gt). ## Importaciones del servidor y del cliente [#imports] La entrada principal de `gt-next` apunta a una implementación distinta según dónde la importes: * En un **componente de servidor síncrono**, [``](/docs/react/reference/components/t) y [``](/docs/react/reference/components/gt-provider) son implementaciones del servidor que cargan las traducciones en el servidor. Los hooks como [`useGT`](/docs/react/reference/hooks/use-gt), [`useTranslations`](/docs/react/reference/hooks/use-translations), [`useMessages`](/docs/react/reference/hooks/use-messages) y [`useLocale`](/docs/react/reference/hooks/use-locale) funcionan sin una barrera de `'use client'`. * En un **componente de servidor asíncrono**, usa la función async correspondiente de [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt), como [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations), [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) o [`getLocale`](/docs/react/nextjs/reference/functions/get-locale). * En un **componente cliente** (un archivo con `'use client'`), esas mismas importaciones apuntan a las implementaciones compartidas de `gt-react`. Como la ruta de importación es la misma, casi nunca tienes que pensar cuál te toca. Envuelve el JSX en [``](/docs/react/reference/components/t) y se traduce ahí mismo, tanto si el componente se renderiza en el servidor como en el cliente. ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *Nota: las funciones exclusivas del servidor, como [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) y [`tx`](/docs/react/nextjs/reference/functions/tx), no se pueden importar en un componente cliente. Importarlas desde un archivo `'use client'` genera un error.* ## El proveedor en Next.js [#provider] En el App Router de Next.js, [``](/docs/react/reference/components/gt-provider) es un componente de servidor. Colócalo en tu layout raíz: carga las traducciones en el servidor y luego se las pasa a tus componentes cliente. **No** debes pasar props de `locale` ni de `translations`; el servidor las resuelve a partir de la solicitud. ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` El Pages Router de Next.js funciona de forma diferente: pasa `locale` y `translations` a [``](/docs/react/reference/components/gt-provider) a través de las props de la página. Consulta la [guía de inicio rápido de Next.js Pages Router](/docs/react/nextjs-pages-router-quickstart). ## Traducir cadenas [#strings] Para las cadenas independientes —marcadores de posición, valores de `aria-label`, texto alternativo— necesitas una función de traducción en lugar del componente [``](/docs/react/reference/components/t): * **En un componente síncrono**, llama al hook [`useGT`](/docs/react/reference/hooks/use-gt) de `gt-next`. Funciona en componentes de servidor y cliente. * **En un componente asíncrono del App Router**, usa `await getGT` de [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt). ```tsx title="app/page.tsx" import { getGT } from 'gt-next/server'; export default async function Page() { const gt = await getGT(); return

{gt('Hello, world!')}

; } ``` [`getGT`](/docs/react/nextjs/reference/functions/get-gt) y [`useGT`](/docs/react/reference/hooks/use-gt) traducen contenido que se conoce en tiempo de compilación. Para el contenido que solo se conoce en el momento de la solicitud, usa la traducción en runtime. ## Traducción en runtime [#runtime] Los componentes de servidor también pueden traducir bajo demanda al momento de la solicitud con el [`componente `](/docs/react/nextjs/reference/components/tx) y la [`función tx`](/docs/react/nextjs/reference/functions/tx) de `gt-next/server`. Úsalos solo cuando el contenido no se conozca de antemano: traducen a través de la API de General Translation en el servidor mientras se procesa la solicitud, por lo que son más lentos que la traducción en build-time. La traducción en runtime solo está disponible en el servidor; no está disponible en componentes de cliente. ## Cómo se ejecuta la traducción [#how-it-runs] `gt-next` se comporta de forma distinta en producción y en desarrollo, según `NODE_ENV`: * **Producción.** Las traducciones en tiempo de compilación se cargan por defecto desde la CDN de General Translation, o desde tu bundle local si configuras [traducciones locales](/docs/react/nextjs/config#translations). La traducción on-demand con [``](/docs/react/nextjs/reference/components/tx) y [`tx`](/docs/react/nextjs/reference/functions/tx) sigue ejecutándose en componentes de servidor. * **Desarrollo.** Con una clave API de desarrollo, el contenido que se renderiza en una configuración regional distinta de la predeterminada se traduce bajo demanda a través de la API de General Translation y se almacena en caché en memoria, para que puedas previsualizar configuraciones regionales mientras editas. Esta latencia no existe en producción. *Nota: una clave API de producción (con el prefijo `gtx-api-`) hace que `gt-next` se comporte como en producción incluso durante el desarrollo local, desactivando la recarga en caliente on-demand.* ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.