Traducciones locales

¿Qué son las traducciones locales?

Las traducciones locales se almacenan en el paquete de tu aplicación, en lugar de obtenerse desde un CDN (Red de Distribución de Contenidos).

Supongamos que has agregado el comando gtx-cli translate a tu proceso de CD. Esto generará traducciones en formato JSON para tu aplicación. El paso final es sacar estas traducciones de nuestra API y llevarlas a tu aplicación, donde podrán ser utilizadas.

Hay dos formas de hacer esto:

En el paquete de tu aplicación: Después de generar las traducciones, guárdalas en el paquete de tu aplicación.
En un CDN (predeterminado): Obtén las traducciones desde un CDN en tiempo de ejecución.

Por defecto, gt-react obtendrá las traducciones desde el General Translation CDN, y al traducir tu aplicación usando nuestra API, las traducciones se guardarán automáticamente en nuestro CDN.

En React, recomendamos especialmente usar la opción de CDN. Utilizar un CDN minimizará el tamaño del paquete de tu aplicación.

Descripción general

Esta guía te mostrará cómo almacenar traducciones en el paquete de tu aplicación React, en lugar de usar un CDN externo, como el nuestro. Esto significa que las traducciones estarán incluidas en el paquete de tu aplicación y evitarás depender de infraestructura externa.

En esta guía, te guiaremos a través de:

Las ventajas y desventajas de usar traducciones locales.

Cómo configurar traducciones locales para tu aplicación React.

Compromisos

¿Cuáles son los beneficios?

Tiempos de carga más rápidos: Las traducciones locales se sirven directamente desde tu aplicación, lo que significa que cargarán más rápido que las traducciones servidas desde un CDN.
Sin dependencia de servicios externos: La capacidad de tu aplicación para cargar traducciones no depende del tiempo de actividad del CDN. Con gt-react, si no se encuentran traducciones para una localidad determinada, la aplicación automáticamente recurrirá al idioma predeterminado y mostrará el contenido original.

¿Cuáles son las desventajas?

Aumento del tamaño del paquete: Las traducciones locales aumentarán el tamaño del paquete de tu aplicación ya que se servirán junto con ella. Esto significa que tu aplicación puede tardar más en cargar en el cliente.
Gestión de contenido: Si deseas editar una traducción (es decir, no te gusta cómo se ha redactado tu contenido en otro idioma), debes volver a desplegar tu aplicación con la nueva traducción cada vez que realices cambios.

Configuración

Requisitos previos

Asegúrate de que ya has configurado tu aplicación React con GT. Si no es así, por favor completa primero la Guía de inicio rápido o la Configuración del proyecto.

Pasos

Agrega un archivo loadTranslations.[js|ts] en ./src con el siguiente contenido:

src/loadTranslations.ts

export default async function loadTranslations(locale: string) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}

Pasa loadTranslations como una prop al componente <GTProvider>.

src/App.tsx

import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations'; 

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}

Ejecuta el siguiente comando, y cuando se te pregunte si deseas guardar las traducciones en el GT CDN, selecciona la opción "No".

npx gtx-cli configure

Alternativamente, puedes configurar manualmente el archivo gt.config.json para usar traducciones locales. Consulta la documentación de Configuración de la CLI para más información.

Ahora, cuando ejecutes el comando de traducción, las traducciones se descargarán automáticamente y se incluirán en tu base de código.

npx gtx-cli translate

La función loadTranslations se usará entonces para cargar estas traducciones en tu aplicación.

Dependiendo del framework específico que estés utilizando, es posible que los archivos JSON de traducción no se incluyan automáticamente en el bundle final. Por favor, consulta la documentación de tu framework específico para asegurarte de que los JSONs estén incluidos.

¡Eso es todo! Ahora tu aplicación solo cargará traducciones desde tus archivos locales.

Personalización adicional

Puedes personalizar aún más la función loadTranslations para cargar traducciones desde otras fuentes, como tu base de datos o tu propio CDN. Consulta la documentación de loadTranslations() para más información.

Notas

Las traducciones locales son una alternativa a obtener traducciones desde un CDN.
Hay beneficios y desventajas al usar traducciones locales, los cuales se discuten en la sección de Compromisos.

Próximos pasos

Consulta loadTranslations() para obtener más información sobre cómo escribir un cargador de traducciones personalizado.

Traducciones locales

En esta página