gt-react@11.0.0
Ernest McCarterDescripción general
gt-react 11 es el eje de una versión coordinada de General Translation en nuestras bibliotecas para React. gt-react, gt-next, @generaltranslation/react-core, gt-react-native y gt-tanstack-start pasaron a la versión 11, junto con gt-i18n 1.0 y generaltranslation 9.0.
Esta versión tuvo dos objetivos: facilitar la ampliación del runtime de i18n a más frameworks y reducir la cantidad de código de General Translation que se envía a los usuarios. El resultado es una base compartida con flujos de configuración más claros para aplicaciones que solo se ejecutan en el navegador y aplicaciones renderizadas en el servidor.
Compatibilidad nativa con Pages Router
El cambio más importante para el usuario en la v11 es la compatibilidad directa con Pages Router de Next.js en gt-next. Antes, las aplicaciones con Pages Router tenían que usar gt-react. Ahora pueden usar withGTServerSideProps() para cargar la configuración regional y el snapshot de traducción, y luego pasar ambos a <GTProvider> en _app.tsx.
La serie v11 también añade enrutamiento por configuración regional basado en middleware y withGTStaticProps() para la generación estática.
Flujos de configuración actualizados
- React SPAs - Inicializa
gt-reactconinitializeGTSPA()antes de que se cargue la aplicación. El inicializador resuelve la configuración regional y las traducciones de antemano, por lo que las SPA ya no necesitan un proveedor. Consulta el Quickstart de React SPA. - React renderizado en el servidor - Inicializa el runtime una sola vez y luego resuelve en el servidor la configuración regional de la solicitud y el snapshot de traducciones. Pasa tanto
localecomotranslationsa<GTProvider>para una hidratación sincrónica. Consulta el Quickstart de React renderizado en el servidor. - TanStack Start - Resuelve la configuración regional y el snapshot de traducciones en el root loader, y luego pasa ambos a
<GTProvider>. La selección de la configuración regional también se conserva mediante la cookie de configuración regional configurada. Consulta el Quickstart de TanStack Start.
Un runtime más pequeño y más extensible
La versión 11 elimina código que las aplicaciones cliente no necesitan y facilita que los empaquetadores apliquen tree-shaking a los paquetes. Las rutas de traducción solo para desarrollo también pueden eliminarse de las compilaciones de producción.
En nuestro benchmark de producción de Next.js, el JavaScript del cliente atribuido a GT bajó de aproximadamente 251 KB a 108 KB: una disminución del 57.1%. Esto mide la parte de General Translation del bundle del cliente, no el bundle completo de la aplicación. Explora los datos de paquetes y puntos de entrada en el Odysseus Bundle Size Tracker.
La misma refactorización nos da una base común para admitir más frameworks.
De cara al futuro
Planeamos seguir reduciendo el bundle del cliente. A continuación, queremos modularizar funciones como la traducción de diccionarios y el hot reload en desarrollo para que las aplicaciones solo incluyan las funciones que usan.
También planeamos apoyarnos más en una arquitectura guiada por el compilador. Llevar más trabajo a la compilación en lugar de al runtime debería reducir el JavaScript del cliente y la sobrecarga en runtime, además de facilitar la compatibilidad con más frameworks.