# General Translation Key Concepts: Динамический контент
URL: https://generaltranslation.com/ru/docs/key-concepts/dynamic-content.mdx
---
title: Динамический контент
description: Краткий обзор работы с динамическим контентом в GT.
---

## Обзор

**Динамический контент** — это, как правило, любой контент, который может меняться в зависимости от пользователя, контекста, среды и т. д.
В отличие от него, **статический контент** остается неизменным независимо от пользователя, контекста, среды и т. д.

<Accordions>
  <Accordion title="В чем разница между динамическим и статическим контентом?">
    Кратко:

    * Статический контент никогда не меняется (обычный текст, строки и т. д.).
    * Динамический контент может меняться (имена, адреса электронной почты, время, язык и т. д.).

    **Что такое статический контент?**

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

    Например, рассмотрим этот файл:

    ```jsx title="Landing.jsx" copy

    export default function Landing() {
        return (
            <> Welcome to my app!</>
        );
    }
    ```

    Текст «Welcome to my app!» — это статический контент, потому что он никогда не меняется.

    Но что, если мы захотим изменить страницу так, чтобы она реагировала на то, вошел ли пользователь в систему:

    ```jsx title="Landing.jsx" copy

    export default function Landing(user) {

        if (user) {
            return (
                <h1> Welcome to my app, {user.name}! </h1>
            );
        }
        
        return (
            <h1> Welcome to my app!</h1>
        );
    }
    ```

    Хотя эти две фразы отображаются условно, обе по-прежнему считаются статическим текстом.
    Помните наше практическое правило: мы можем увидеть этот контент, просто прочитав исходный код в `landing.jsx`.

    Однако `{user.name}` считается динамическим контентом, потому что это значение может меняться.
    Мы не можем определить, что именно будет показано на экране пользователя, просто прочитав файл `landing.jsx`.
  </Accordion>
</Accordions>

## «Tx или не Tx»

Иногда нужно переводить динамический контент, а иногда — оставлять их без изменений.

Хороший пример — адрес электронной почты или имя пользователя.
Другой пример — баланс банковского счёта или SSN пользователя.
Такие данные (1) обычно не нужно переводить, когда приложение отображается на другом языке, и (2) они могут различаться от пользователя к пользователю.

### Пример

```jsx title="Greeting.jsx" copy
import { T, Var } from 'gt-next'

export default function Greeting(name) {
    return (
        <T id='greeting'>
            Hello, <Var>{name}</Var>!
        </T>
    );
}
```

С точки зрения перевода у этого есть два преимущества:

1. Вам не нужно создавать перевод для каждого возможного имени.
   * При использовании `<Var>` мы генерируем только один перевод, который будет выглядеть примерно так:
     * `¡Hola, $&#123;name&#125;!`
   * Если не использовать `<Var>`, пришлось бы выполнять перевод по запросу для каждого уникального имени:
     * &quot;¡Hola, Alice!&quot;, &quot;¡Hola, Bob!&quot;, &quot;¡Hola, Charlie!&quot;, &quot;¡Hola, David!&quot;, ...
2. Вам также не нужно беспокоиться о том, что сами имена будут заменены их переведённой формой (то есть &quot;¡Hola, Alicia!&quot;, &quot;¡Hola, Roberto!&quot;, ...).

<Callout type="info">
  **Примечание:** Компоненты `<Var>`, `<Currency>`, `<DateTime>` и `<Num>` доступны в `gt-next`, `gt-react` и `gt-react-native`.
</Callout>

Как видите, компонент `<Var>` следует использовать, чтобы оборачивать любое содержимое, которое должно оставаться неизменным независимо от локали.
Так мы избегаем необходимости создавать переводы для каждого возможного значения динамического контента.

Если обернуть конфиденциальную информацию в компонент `<Var>`, можно быть уверенным, что она не будет отправлена в API General Translation.

<Callout>
  **Исключения**

  Исключения из утверждения выше: (1) случай, когда вложенный компонент `<T>` используется внутри компонента `<Var>` (то есть дочерние элементы вложенного компонента `<T>` будут переведены),
  или (2) когда данные намеренно передаются в наш API каким-либо другим способом из дочернего элемента компонента `<Var>` (то есть через вызов fetch).
  Однако это не предполагаемый способ использования компонента `<Var>` или API General Translation, и это может негативно сказаться на времени загрузки и производительности.
</Callout>