# General Translation Key Concepts: Contenido dinámico
URL: https://generaltranslation.com/es/docs/key-concepts/dynamic-content.mdx
---
title: Contenido dinámico
description: Una breve introducción a cómo trabajar con el contenido dinámico en GT.
---
## Descripción general
**El contenido dinámico** es, por lo general, cualquier contenido que puede cambiar según el usuario, el contexto, el entorno, etc.
Esto contrasta con el **contenido estático**, que permanece igual independientemente del usuario, el contexto, el entorno, etc.
En resumen
* El contenido estático nunca cambia (cadenas literales, texto, etc.).
* El contenido dinámico puede cambiar (nombres, correos electrónicos, hora, idioma, etc.).
**¿Qué es el contenido estático?**
El contenido estático, por lo general, se refiere a cualquier texto literal que existe en el bundle que se sirve a tus usuarios.
Una buena regla general es que cualquier texto o cadena que un desarrollador pueda leer en el código fuente es texto estático.
Por ejemplo, considera este archivo:
```jsx title="Landing.jsx" copy
export default function Landing() {
return (
<> Welcome to my app!
);
}
```
El texto "Welcome to my app!" es contenido estático porque nunca cambia.
Pero ¿qué pasaría si quisiéramos cambiar la página para que respondiera si el usuario hubiera iniciado sesión?
```jsx title="Landing.jsx" copy
export default function Landing(user) {
if (user) {
return (
Welcome to my app, {user.name}!
);
}
return (
Welcome to my app!
);
}
```
Aunque estas dos frases se renderizan de forma condicional, ambas se consideran texto estático.
Recuerda nuestra regla general: podemos ver este contenido al leer el código fuente en `landing.jsx`.
Sin embargo, `{user.name}` se considera contenido dinámico porque puede cambiar.
No podemos saber qué se mostrará en la pantalla del usuario con solo leer el archivo `landing.jsx`.
## "Tx o no Tx"
A veces queremos traducir contenido dinámico, pero otras veces queremos que permanezca igual.
Un buen ejemplo sería la dirección de correo electrónico o el nombre de un usuario.
Otro ejemplo podría ser el saldo de una cuenta bancaria o el número de seguro social de un usuario.
Estos elementos (1) probablemente no necesiten traducción cuando tu aplicación se renderiza en otro idioma y (2) pueden variar (en este caso, de un usuario a otro).
### Ejemplo
```jsx title="Greeting.jsx" copy
import { T, Var } from 'gt-next'
export default function Greeting(name) {
return (
Hello, {name}!
);
}
```
En cuanto a la traducción, esto tiene dos ventajas:
1. No tienes que crear una traducción para cada nombre posible.
* Al usar ``, solo generamos una traducción que básicamente se vería así:
* `¡Hola, ${name}!`
* Si no usamos ``, tendríamos que hacer una traducción bajo demanda para cada nombre distinto:
* "¡Hola, Alice!", "¡Hola, Bob!", "¡Hola, Charlie!", "¡Hola, David!", ...
2. Tampoco tienes que preocuparte de que los propios nombres se conviertan en una versión traducida: (es decir, "¡Hola, Alicia!", "¡Hola, Roberto!", ...).
**Nota:** Los componentes ``, ``, `` y `` están disponibles en `gt-next`, `gt-react` y `gt-react-native`.
Como puedes ver, el componente `` debe usarse para envolver cualquier contenido que deba permanecer igual independientemente de la configuración regional.
De esta forma, evitamos tener que crear traducciones para cada posible valor del contenido dinámico.
Al envolver información privada en un componente ``, puedes asegurarte de que esa información no se envíe a la API de General Translation.
**Excepciones**
Las excepciones a la afirmación anterior son: (1) en el caso de un componente `` anidado dentro de un componente `` (es decir, los elementos hijos del componente `` anidado sí se traducirán)
o (2) cuando los datos se envían intencionalmente a nuestra API por algún otro medio dentro de un elemento hijo del componente `` (por ejemplo, mediante una llamada `fetch`).
Sin embargo, este no es el uso previsto del componente `` ni de la API de General Translation, y hacerlo puede perjudicar los tiempos de carga y el rendimiento.