Консоль

Динамический контент

Как переводить содержимое во время выполнения с помощью серверных API перевода

Перевод динамического контента применяется к тексту, недоступному на этапе сборки — пользовательскому контенту, ответам API или записям баз данных. Используйте <Tx> для JSX‑содержимого и tx для обычных строк; оба варианта выполняются только на сервере из соображений безопасности.

Используйте умеренно: Динамический перевод расходует квоту API и добавляет задержку. По возможности отдавайте предпочтение компонентам <T> с переменными.

Когда использовать динамический перевод

Динамический перевод предназначен для контента, который действительно невозможно определить на этапе сборки:

Рекомендуемые сценарии использования

  • Пользовательский контент: сообщения в чате, отзывы, публикации в соцсетях
  • Ответы внешних API: сторонние данные, RSS-ленты, внешние сервисы
  • Записи в базе данных: динамический контент CMS, профили пользователей из API
  • Данные в реальном времени: уведомления в реальном времени, статусные сообщения

Не используйте для следующих случаев

Быстрый старт

Содержимое JSX с <Tx>

import { Tx } from 'gt-next';

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

Простые строки с tx

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Только на стороне сервера

И <Tx>, и tx работают только на стороне сервера из соображений безопасности:

// ✅ Серверный компонент
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Клиентский компонент — не работает
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Ошибка!
  return <div>{translated}</div>;
}

Примеры

Контент, созданный пользователями

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>
  );
}

Данные внешнего API

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>
  );
}

Смешанное содержимое

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

async function ProductReview({ review }) {
  return (
    <div>
      {/* Статическое содержимое с переменными */}
      <T>
        <p><Var>{review.author}</Var> поставил(а) оценку <Var>{review.rating}</Var> звёзд</p>
      </T>
      
      {/* Динамическое содержимое пользователя */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Частые проблемы

Избегайте чрезмерного использования

Не применяйте динамический перевод к содержимому, для которого можно использовать стандартные компоненты:

// ❌ Не нужно
const content = `Привет, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Вместо этого используйте компоненты переменных
return (
  <T>
    <p>Привет, <Var>{userName}</Var>!</p>
  </T>
);

Влияние на квоту API

Динамический перевод потребляет квоту API при каждом запросе. В продакшене используйте кэширование и обработку ошибок.

Следующие шаги

Насколько полезно это руководство?

На этой странице

Когда использовать динамический перевод
Рекомендуемые сценарии использования
Не используйте для следующих случаев
Быстрый старт
Содержимое JSX с <Tx>
Простые строки с tx
Только на стороне сервера
Примеры
Контент, созданный пользователями
Данные внешнего API
Смешанное содержимое
Частые проблемы
Избегайте чрезмерного использования
Влияние на квоту API
Следующие шаги
Динамический контент