# General Translation React SDKs (gt-react, gt-next, gt-react-native): Серверные компоненты URL: https://generaltranslation.com/ru/docs/react/nextjs/server-components.mdx Docs index: https://generaltranslation.com/llms.txt Description: Переводите контент в React Server Components с помощью General Translation и узнайте, как `gt-next` работает в серверных и клиентских компонентах. В Next.js App Router `gt-next` работает и в React Server Components (RSC), и в клиентских компонентах. Один и тот же компонент [``](/docs/react/reference/components/t) и хуки перевода импортируются из `gt-next` в обоих случаях, а библиотека сама выбирает нужную реализацию в зависимости от окружения. Асинхронные функции App Router находятся в точке входа `gt-next/server`, которая не работает с Pages Router. Прочитайте эту страницу, чтобы понять, где выполняется перевод и какие импорты доступны для каждого типа компонентов. Если вам нужны отдельные страницы о серверном API, начните с [`getGT`](/docs/react/nextjs/reference/functions/get-gt). ## Серверные и клиентские импорты [#imports] Основная точка входа `gt-next` указывает на разные реализации в зависимости от того, где вы её импортируете: * В **синхронном серверном компоненте** [``](/docs/react/reference/components/t) и [``](/docs/react/reference/components/gt-provider) — это серверные реализации, которые загружают переводы на сервере. Хуки, такие как [`useGT`](/docs/react/reference/hooks/use-gt), [`useTranslations`](/docs/react/reference/hooks/use-translations), [`useMessages`](/docs/react/reference/hooks/use-messages) и [`useLocale`](/docs/react/reference/hooks/use-locale), работают без границы `'use client'`. * В **асинхронном серверном компоненте** используйте соответствующую асинхронную функцию из [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt), например [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations), [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) или [`getLocale`](/docs/react/nextjs/reference/functions/get-locale). * В **клиентском компоненте** (файле с `'use client'`) те же импорты указывают на общие реализации `gt-react`. Поскольку путь импорта одинаков, обычно вам не нужно задумываться, какую именно реализацию вы получаете. Оберните JSX в [``](/docs/react/reference/components/t), и он будет переведён на месте — независимо от того, рендерится компонент на сервере или на клиенте. ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *Примечание: функции, доступные только на стороне сервера, такие как [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) и [`tx`](/docs/react/nextjs/reference/functions/tx), нельзя импортировать в клиентский компонент. Их импорт из файла `'use client'` вызывает ошибку.* ## Провайдер в Next.js [#provider] В App Router для Next.js [``](/docs/react/reference/components/gt-provider) — это серверный компонент. Разместите его в корневом layout: он загружает переводы на сервере, а затем передаёт их вашим клиентским компонентам. Передавать пропсы `locale` или `translations` **не** нужно — сервер сам получает их из запроса. ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` Pages Router в Next.js работает по-другому: передайте `locale` и `translations` в [``](/docs/react/reference/components/gt-provider) через пропсы страницы. См. [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). ## Перевод строк [#strings] Для отдельных строк — плейсхолдеров, значений `aria-label`, alt-текста — нужна функция перевода, а не компонент [``](/docs/react/reference/components/t): * **В синхронном компоненте** вызовите хук [`useGT`](/docs/react/reference/hooks/use-gt) из `gt-next`. Он работает и в серверных, и в клиентских компонентах. * **В асинхронном компоненте App Router** используйте `await getGT` из [`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) и [`useGT`](/docs/react/reference/hooks/use-gt) переводят контент, известный на этапе сборки. Для контента, который становится известен только во время запроса, используйте перевод во время выполнения. ## Перевод во время выполнения [#runtime] Серверные компоненты также могут переводить по запросу во время обработки запроса с помощью [компонента ``](/docs/react/nextjs/reference/components/tx) и [функции `tx`](/docs/react/nextjs/reference/functions/tx) из `gt-next/server`. Используйте их только тогда, когда содержимое заранее неизвестно: перевод выполняется через API General Translation на сервере в ходе обработки запроса, поэтому он медленнее, чем перевод на этапе сборки. Перевод во время выполнения доступен только на сервере; в клиентских компонентах он недоступен. ## Как работает перевод [#how-it-runs] `gt-next` ведет себя по-разному в production и в development; это определяется по `NODE_ENV`: * **Production.** Переводы на этапе сборки по умолчанию загружаются из CDN General Translation или из локального бандла, если вы настроите [локальные переводы](/docs/react/nextjs/config#translations). Перевод по запросу через [``](/docs/react/nextjs/reference/components/tx) и [`tx`](/docs/react/nextjs/reference/functions/tx) по-прежнему работает в серверных компонентах. * **Development.** С API-ключом для разработки контент, отрисованный в локали, отличной от локали по умолчанию, переводится по запросу через API General Translation и кэшируется в памяти, чтобы вы могли просматривать локали по мере редактирования. В production этой задержки нет. *Примечание: API-ключ для production (с префиксом `gtx-api-`) заставляет `gt-next` работать как в production даже при локальной разработке, отключая горячую перезагрузку для перевода по запросу.* ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.