Resolviendo i18n para Componentes de Servidor de React

Rate this content
Bookmark

Cómo la transición a los Componentes de Servidor de React permite soluciones de internacionalización mejores.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Loris Sigrist
Loris Sigrist
7 min
18 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La Charla discute la internacionalización para componentes de servidor y el desafío de cargar traducciones de manera eficiente. Sugiere usar declaraciones de importación en JavaScript para optimizar la carga de mensajes y eliminar la necesidad de espacios de nombres. La eliminación de árboles y herramientas como Paraglide.js pueden ayudar a minimizar la entrega de mensajes y simplificar el proceso. En general, la Charla enfatiza la importancia de prácticas eficientes de internacionalización en la construcción de aplicaciones multilingües.

1. Introducción a la Internacionalización

Short description:

Soy Loris de Inlang, y hoy hablaré sobre la internacionalización para componentes del servidor. Nuestro objetivo es construir una aplicación multilingüe minimizando los datos enviados a través de la red. Solíamos cargar las traducciones por página en espacios de nombres, pero esto se vuelve desafiante con los componentes del servidor. En el servidor, puedes cargar todo, pero en el cliente, es ineficiente cargar un espacio de nombres para cada componente.

Hola, soy Loris. Construyo herramientas de internacionalización en una empresa llamada Inlang, y hoy hablaré sobre la internacionalización para componentes del servidor. Entonces, para que todos estemos en la misma página, hablaré sobre las traducciones de cadenas, tus diseños, tus componentes, no tu contenido. Así que, cuando hacemos internacionalización, nuestro objetivo es, por supuesto, construir una aplicación multilingüe enviando la menor cantidad de bytes posible a través de la red. Queremos ser muy precisos en los mensajes y traducciones que cargamos para mostrar solo lo que es realmente necesario. Respetamos el ancho de banda de nuestros usuarios.

Antes de los componentes del servidor, la unidad en la que cargaríamos las traducciones era una página a la vez. Entonces, tendría un cierto conjunto de mensajes que necesitarías en una página, cierto conjunto de mensajes que necesitarías en otra página. Entonces, lo que harías es clasificarlos en espacios de nombres, grupos de nombres. Luego cargarías imperativamente estos espacios de nombres con algún tipo de función de carga de espacios de nombres. Cada elemento en una biblioteca va a tener algún tipo de equivalente a ese. Ahora, lo que normalmente terminarías teniendo es más o menos un espacio de nombres por página. Luego, si tienes un componente compartido por página, tal vez una barra de autenticación o un componente que se utiliza en muchas páginas, crearías un segundo espacio de nombres solo para eso. También lo cargarías imperativamente cuando cargas la página. Entonces, necesitas llevar un registro de, ok, ¿qué mensajes necesito exactamente y cuáles no necesito? A menudo también tienes algún tipo de espacio de nombres común donde tienes mensajes que se utilizan en muchos lugares diferentes, cosas genéricas, adelante, atrás. Entonces, lo que puedes ver aquí es que terminas teniendo bastantes espacios de nombres por página. Estoy seguro de que si has construido muchas aplicaciones multilingües, esto te resultará familiar. Pero hay bastante trabajo de contabilidad, pero por lo general es manejable. Terminas teniendo entre dos y cinco espacios de nombres por página. Es un poco de trabajo, pero se puede hacer. Pero este patrón se vuelve mucho más difícil de implementar correctamente si introduces componentes del servidor en la mezcla, porque la unidad en la que cargas los mensajes ya no es por página. Ahora estás tratando de cargar exactamente los mensajes que se necesitan para los componentes del cliente que vas a renderizar. Con los componentes del servidor, tu página es como una especie de parche de cosas que se renderizan en el servidor y cosas que están en el cliente, y necesitas mensajes en ambos, necesitas traducciones en ambos. Pero los requisitos sobre cómo cargar realmente estos mensajes son muy, muy diferentes. En el servidor, realmente no necesitas hacer ninguna carga detallada en absoluto. Puedes cargar todo, ser glotón y usar lo que quieras, como te gusta. No hagas ninguna contabilidad en absoluto. Eso es maravilloso. Pero si nos quedáramos con el enfoque de carga de espacios de nombres y carga imperativa, en el cliente, sería muy, muy doloroso, porque terminarías creando un espacio de nombres para cada componente del cliente, luego necesitarías cargarlo imperativamente con la página, y eso sería

2. Carga eficiente con declaraciones de importación

Short description:

Queremos cargar solo los mensajes necesarios para una página y los componentes del cliente. Los espacios de nombres ya no son adecuados para los componentes del servidor. En su lugar, podemos usar declaraciones de importación en JavaScript para expresar dependencias y optimizar la carga de mensajes. Al tener todos los mensajes en un archivo JavaScript, las herramientas de compilación pueden analizar y eliminar los mensajes no utilizados. La eliminación de árboles asegura una entrega mínima de mensajes. Herramientas como Paraglide.js pueden generar los archivos necesarios, eliminando la necesidad de carga imperativa. Deja de usar espacios de nombres y prueba Paraglide.js.

ser mucho trabajo, mucha sobrecarga. Realmente solo queremos cargar los mensajes que se utilizan en una página y se utilizan en los componentes del cliente en esa página. Así que tenemos estos escenarios en competencia donde, por un lado, realmente necesitamos una carga muy, muy, muy detallada, y en el servidor, no necesitamos una carga detallada en absoluto. Pero, por supuesto, realmente no podemos hacer APIs separadas para el servidor y el cliente, porque cuando desarrollamos nuestras aplicaciones, nuestras aplicaciones son documentos vivos. Los componentes del cliente se convierten en componentes del servidor, se convierten en componentes del cliente, se agregan componentes, se eliminan componentes. Entonces, mantener la carga imperativa en sincronía con todo eso sería demasiado trabajo, demasiada sobrecarga. Entonces, cuando se trata de cargar traducciones, los espacios de nombres realmente ya no son la forma de hacerlo cuando se introducen componentes del servidor en la mezcla, porque se convierte en una cantidad prohibitiva de esfuerzo que debes poner para cargar lo que necesitas y solo lo que necesitas. Seguramente tiene que haber una mejor manera. Retrocedamos un paso y comencemos a pensar en lo que realmente estamos tratando de hacer cuando hacemos estas liberaciones de espacios de nombres. Lo que estamos tratando de expresar es que este componente depende de estos mensajes, este code depende de eso. Y en JavaScript, tenemos esta maravillosa herramienta llamada declaración de importación, que expresa esa relación muy, muy bien. Y tenemos herramientas que pueden analizar eso, enlazadores que pueden ajustar y todo lo que realmente pueden aprovechar al máximo.

Imaginemos que en lugar de espacios de nombres ordenados o archivos JSON, tuviéramos un archivo JavaScript gigante donde todos nuestros mensajes que existen en nuestra aplicación están presentes y se exportan por separado. Ahora no nos preocupemos de dónde obtuvimos ese archivo. Supongamos que lo tenemos. Puedes ver esto a la izquierda aquí, lo que podemos hacer en nuestros componentes, independientemente de si son componentes del cliente o componentes del servidor, es simplemente importar desde ese archivo y usar los mensajes que queremos. Y nuestras herramientas de compilación, o Redpack o TurboPack, serán lo suficientemente inteligentes como para ver, está bien, estamos usando exactamente este mensaje y solo son estos mensajes y los estamos usando en el cliente. Puede hacer esto por separado para el servidor y el cliente, aunque el code sea idéntico. Por lo tanto, podrá ver qué mensajes estamos utilizando y podrá eliminar todos los demás. Así que obtenemos el conjunto mínimo de mensajes que se utilizan en el cliente. Si estás desarrollando, es muy común que tu componente del cliente se convierta en un componente del servidor o viceversa, generalmente solo agregando o eliminando la parte de uso del cliente allí. Y la eliminación de árboles en nuestros enlazadores es lo suficientemente inteligente como para hacer esto correctamente. Entonces, si elimino el uso del cliente allí, todos los mensajes ya no se enviarían al cliente. Estamos enviando la menor cantidad de bytes posible. Esta es una carga detallada perfecta.

Ahora, por supuesto, probablemente no quieras escribir realmente un archivo de mensajes de este tipo tú mismo. Es bastante sencillo si solo estás usando cadenas, pero si tienes tus formatos de mensajes ICU con un montón de plurales, formatos de moneda y todo eso. Va a ser muy, muy tedioso de mantener. Y, por supuesto, tus traductores no podrán trabajar con eso. Entonces, querrás generar este archivo de alguna manera. Hay un montón de herramientas disponibles para hacer esto. Pero yo mismo, he estado trabajando en una. Se llama Paraglide.js. Hace exactamente lo que acabo de decir, solo toma archivos de traducción y te da un archivo de mensajes gigante, y luego puedes usar esas declaraciones de entrada para expresar todas las relaciones que necesitas. Y ya no necesitas preocuparte por hacer ninguna carga imperativa en absoluto. Esa es mi presentación. Por favor, deja de usar espacios de nombres para cargar cosas. Ya no son adecuados para el propósito. Y prueba una biblioteca como Paraglide.js. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplificando los Componentes del Servidor
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplificando los Componentes del Servidor
Top Content
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Explorando los fundamentos de los Componentes del Servidor React
React Day Berlin 2023React Day Berlin 2023
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
Y Ahora Entiendes los Componentes del Servidor React
React Summit 2024React Summit 2024
27 min
Y Ahora Entiendes los Componentes del Servidor React
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Componentes del Servidor: La Épica Historia de Renderizar UX
React Summit 2023React Summit 2023
26 min
Componentes del Servidor: La Épica Historia de Renderizar UX
Top Content
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.
RSCs en Producción: 1 Año Después
React Summit 2024React Summit 2024
24 min
RSCs en Producción: 1 Año Después
This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.

Workshops on related topic

Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
React Summit US 2023React Summit US 2023
160 min
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
React Summit US 2023React Summit US 2023
104 min
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.
Construyendo Componentes de Servidor Reutilizables en NextJS
React Summit US 2023React Summit US 2023
88 min
Construyendo Componentes de Servidor Reutilizables en NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías:
React, JavaScript/Typescript, NextJS, Miro
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
Construye una Tienda Personalizada en Shopify con Hydrogen
React Advanced Conference 2021React Advanced Conference 2021
170 min
Construye una Tienda Personalizada en Shopify con Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.