1. Introducción a Remix e Internacionalización
Hola a todos. Estoy muy emocionada de verlos a todos y hablar sobre Remix e internacionalización. Soy Arisa, una ingeniera de relaciones de desarrollo en Storyblock y embajadora en Girl Code y GDE. Exploraremos el impacto y la lógica fundamental de la internacionalización, y cómo funciona con Remix. Todavía hay discusiones activas sobre Remix e internacionalización, así que siéntanse libres de contribuir. Vamos a sumergirnos y ver qué piensan los desarrolladores sobre la implementación de la lógica de internacionalización. No es un tema prioritario, pero ¿por qué? Según Maya, no se implementa a diario y hay problemas con el texto localizado y las claves de internacionalización. Vamos a explorar la internacionalización desde una perspectiva global y considerar el punto de vista del usuario.
estoy muy emocionada de hablar sobre
Remix e internacionalización. Bueno, para no perder más tiempo, aquí hay algunas cosas sobre mí. Mi nombre es Arisa y soy una ingeniera de relaciones de desarrollo en Storyblock, así como embajadora en Girl
Code y GDE, Google Developer Expert en Tecnologías Web. Bueno, hay 3 puntos clave en mi charla. En primer lugar, vamos a analizar el impacto de la internacionalización y la lógica fundamental, y por último vamos a ver cómo funciona
Remix y la internacionalización juntos. Hay algunas notas que quiero que tengan en cuenta antes de ver mi charla. En primer lugar, todavía hay discusiones activas sobre
Remix y la internacionalización, lo que significa que podrían ser una de las personas que contribuyan a mejorar la experiencia de desarrollo. Así que siéntanse libres de echar un vistazo a las discusiones o incluso unirse a ellas. Voy a compartir las diapositivas más adelante en Twitter, para que tengan acceso a todos los enlaces que he pegado en estas diapositivas. Muy bien, vamos al grano. Estamos aquí para hablar sobre la internacionalización y cómo funciona con
Remix. Mientras preparaba mi charla, quería incluir tantas opiniones de los desarrolladores como fuera posible, no solo desde mi punto de vista. Así que empecé a hacer esta pregunta en Twitter. ¿Les gusta implementar la lógica de internacionalización? Y este es el resultado que obtuve. En primer lugar, obtuve el resultado de 30... 36 desarrolladores Y dicen que aproximadamente el 41.97% de los desarrolladores. Dicen que no es su favorito. Es un proceso un poco molesto de hacer. Y basándome en este hecho, también quería saber, hmm, okay, quiero saber más detalles. Pero probablemente por lo que veo en esta rápida encuesta en Twitter, tal vez para nosotros los desarrolladores no es un tema prioritario en comparación con el rendimiento y la accesibilidad. Pero por supuesto quiero saber más. ¿Por qué? Así que pregunté. Si la internacionalización no es tu parte favorita, ¿por qué es así? Aquí está mi amiga, Maya, que me respondió. Gracias, Maya. En primer lugar, ella dice, como no implementa la función de internacionalización a diario. Significa que cuando necesita hacerlo, necesita volver a ver cómo funciona en las bibliotecas de internacionalización o los
frameworks que usa cada vez. Además, hay un pequeño problema entre el texto localizado y las claves de internacionalización, ya saben, durante las pruebas. Así que sabemos que, okay, probablemente la internacionalización no es el tema más popular y no es algo divertido para los desarrolladores. Y según lo que pensamos, por supuesto, también necesitamos echar un vistazo o ver cómo es en el mundo. Y
2. Uso global de Internet
Hablemos sobre el uso global de Internet. Hay 5.07 mil millones de usuarios de Internet en todo el mundo. Solo el 25.9% del contenido está en inglés, mientras que el 74.1% es en otros idiomas. China tiene la mayoría de los usuarios de Internet y Asia representa más de la mitad de los usuarios de Internet a nivel mundial. Localizar el contenido puede no ser un tema popular para los desarrolladores, pero es demasiado importante para ignorarlo.
¿cómo es desde la perspectiva del usuario? Aquí están los pequeños números y los datos, me gustaría comenzar con números más grandes. En primer lugar, quiero que pienses en este número. ¿Qué crees que representa este número de 5.07 mil millones, número de usuarios en el mundo que utilizan Internet? Desglosando, ya sabes, estos grandes miles de millones de números en porcentajes más pequeños, comenzando por el 25.9%. ¿Qué opinas de este porcentaje? En realidad, es el porcentaje del contenido en inglés en el 25.9%. Es menos del 50%. Lo que significa que si eres bueno en matemáticas, entonces podrías calcular este número 74.1%. Sí, ese es el resto del porcentaje de los usuarios que acceden a contenido en otros idiomas en Internet. Lo cual nos lleva a esta palabra clave, China. China tiene la mayoría de los usuarios de Internet a nivel mundial. No es sorprendente basándonos en este hecho. También podríamos pensar en esta palabra clave, Asia. Sí, Asia tiene más de la mitad de los usuarios de Internet a nivel mundial. Eso es enorme, ¿verdad? Así que ahora sabemos que localizar el contenido no es el tema más popular para nosotros, los desarrolladores. Sin embargo, no podemos ignorarlo, sin importar qué. Sabes, más de la mitad de los usuarios en el
3. Fundamental Logic of Internationalization
Hablemos sobre la lógica fundamental de la internacionalización. Funciona de tres maneras: ubicación a partir de la dirección IP, encabezado de idioma aceptado de la solicitud HTTP o los idiomas del navegador, y el identificador en la URL. Utilizaremos dos formas híbridas para brindar a los usuarios más flexibilidad y control. Hay tres patrones para localizar la URL: diferentes dominios, parámetros de URL y subdirectorios de localización. Ahora hablemos de los marcos y bibliotecas que utilizan la internacionalización.
mundo. Son números demasiado masivos para ignorar. Entonces, basándonos en lo que sabemos, en lo que sentimos, hablemos sobre la lógica fundamental de la internacionalización. En primer lugar, la internacionalización funciona de tres maneras, para determinar los idiomas y las regiones. El primer enfoque, el más importante, es la ubicación a partir de la dirección IP, lo que significa que, según la dirección IP, por ejemplo, donde me encuentro actualmente en Alemania, el contenido que veo en Internet detectará que estoy en Alemania. Por lo tanto, el contenido se mostrará, ya sabes, en alemán a veces si utilizan este enfoque. Si utilizan el segundo enfoque, significa que utilizan el encabezado de idioma aceptado de la solicitud HTTP o los idiomas del navegador lo que significa que echarán un vistazo a mis preferencias de idioma. Entonces, en el navegador, prefiero usar el inglés. Eso es lo que configuro en mi configuración y eso es lo que, ya sabes, la información que se utilizará para, ya sabes, devolver el contenido localizado para mí. A veces, incluso cuando estoy en Alemania, veo el contenido en inglés como lo preferí. Y la tercera opción es utilizar el identificador en la URL. Básicamente, se trata de traducir o localizar la URL para los usuarios. Esto significa que tendría, por ejemplo, botones de selección de idioma en inglés, alemán y japonés en el navegador, y puedo hacer clic para seleccionar para ver los idiomas. En esta charla, vamos a utilizar dos formas híbridas porque quiero que los usuarios sean más flexibles y tengan más control por sí mismos. Así que dejaré la opción para que ellos cambien los idiomas de su elección en el navegador desde la interfaz de usuario, así como en primer lugar, seamos más amables detectando su idioma preferido configuración en el navegador. Así que vimos juntos cómo funciona. O cuál es la lógica fundamental en la internacionalización. Y en cuanto al identificador de URL, hay tres patrones para analizarlo. Así que vamos a desglosarlo. Patrón uno. Esta es una forma de diferenciar, ya sabes, el contenido localizado por dominios, básicamente, vas a crear sitios web totalmente diferentes en este caso, pero los dominios son diferentes. Por lo tanto, no seguirá la misma política de origen, lo que significa que tus sitios web podrían ser considerados como una especie de copia. Pasemos al patrón dos. El patrón dos utiliza los parámetros de la URL. Tal vez para los desarrolladores tenga sentido, pero no es amigable para el usuario. Y también para todos, esta URL no se ve limpia, ¿verdad? Así que no queremos seguir este camino. Pasemos al patrón tres, que es la localización de subdirectorios. En este caso, vamos a agregar el slug localizado después de, ya sabes, algo.com, o una barra diagonal. De esta manera, es bastante claro para los usuarios en qué idioma están viendo. También es más fácil para nosotros identificar qué idioma entregamos a los usuarios. Muy bien, ahora hablemos de los
frameworks y las bibliotecas. ¿Por qué de repente de la nada? Bueno, es un tema bastante relevante, porque algunos de los
frameworks y las bibliotecas, y utilizan la internacionalización
4. Internationalization in Remix
Veamos cómo funciona la internacionalización en Remix. Hay dos enfoques: usar el paquete Remix IAT Next o un Sistema de Gestión de Contenido. Remix IAT Next es un paquete de NPM diseñado específicamente para la internacionalización en Remix, creado por Sergio. Crearemos archivos de configuración y archivos traducidos, con el inglés como idioma predeterminado. Usaremos la propiedad 'greeting' y sus valores localizados para la traducción. Después de crear los archivos traducidos, crearemos un archivo de configuración de i18next, especificando los idiomas admitidos y un idioma de respaldo. Finalmente, importaremos el archivo de configuración de i18next y llamaremos a los valores de idioma admitidos y de respaldo.
de
frameworks. Así que veamos cómo funciona en
Remix. En el caso de
Remix, hay en general dos enfoques para elegir. La primera opción sería usar el paquete llamado
Remix, IAT Next. Y el segundo enfoque sería usar un Sistema de Gestión de Contenido. Primero, veamos qué es
Remix IAT Next. Como te dije antes, es un paquete de
NPM, ¿verdad? Y está específicamente diseñado para que
Remix utilice este marco de internacionalización llamado IAT Next, creado por Sergio. Así que gracias, Sergio, por crear un paquete de
NPM tan increíble porque ahora, gracias a eso, tenemos más opciones para elegir. Muy bien, veamos un ejemplo de este caso. En primer lugar, vamos a crear un par de archivos de configuración. Pero para empezar, vamos a crear archivos traducidos. En este caso, voy a crear un idioma predeterminado y otro idioma. Así que establecí el inglés como idioma predeterminado. En el lado derecho y en la parte superior, el archivo se llama common.json, te mostraré por qué ya sé que puedo dar un nombre, ya sabes, al archivo common.json en este caso. Pero por ahora, centrémonos en cómo podemos aceptar el nombre de la propiedad y los valores clave, que en realidad están localizados en valores de cadena. En primer lugar, he decidido llamar a esta propiedad greeting. Así que este valor lo usaré cuando traduzca desde el código fuente, ya sabes, nivel. En el lado derecho está el valor clave, que es el valor de cadena localizado. Quiero decir hola en inglés y traducirlo al japonés. En este caso, he creado otro archivo traducido para, ya sabes, almacenar, ya sabes, este archivo traducido en japonés en el directorio JA. El valor será hola en japonés. Después de crear estos archivos traducidos, vamos a crear un archivo de configuración de i18next. Como dije antes, por alguna razón ya sabía que podía dar el nombre de los archivos traducidos como command.js, ¿verdad? Así que aquí está la razón por la que ya sabía que podía dar un nombre como command.js. Hay un par de otras configuraciones, pero nada demasiado complicado porque en primer lugar solo quiero enumerar los idiomas admitidos, inglés, japonés y, por supuesto, quiero tener un idioma de respaldo que sea el idioma predeterminado. Basado en lo que creamos para traducir estos archivos, y también la traducción de IAT Next, lo siento, el archivo de configuración, ahora es el momento de importar este archivo de configuración de IAT Next en el archivo IAT Next.server.js. Después de importarlo, por supuesto, quiero llamar a un par de valores. En primer lugar, la lista de idiomas admitidos y también la lista de idiomas de respaldo. Y en función de eso, recuerda, este archivo de configuración que creamos, estas listas de idiomas son las matrices dentro de
5. Configuración del lado del cliente y API IATNextProvider
Así que puedo iterar estos valores desde el archivo de configuración que he creado. Aquí está el archivo de configuración del lado del cliente, entry.client.jsx, donde envolvemos el componente del navegador de Remix con la API IATNextProvider. Es importante cargar los archivos de traducción antes de la hidratación para asegurar que la aplicación sea interactiva. Envolver el componente del navegador de Remix con la API IATNextProvider asegura el momento de la hidratación y la carga de archivos de traducción. Esta configuración es crucial para que la aplicación muestre la interfaz de usuario con estilos y archivos de traducción cargados.
Para iterar estos valores desde el archivo de configuración que he creado. Y aquí, lo que estoy haciendo es establecer las rutas de los archivos de traducción. Bien, ahora pasemos a crear los archivos de configuración del lado del cliente y del lado del servidor. Solo te mostraré los detalles de los archivos de configuración del lado del cliente, porque puedes ver más detalles sobre los archivos de configuración del lado del servidor, y un par de líneas de código son bastante similares. Así que no quiero repetir el contenido similar. Aquí está el archivo entry.client.jsx, que es el archivo de configuración del lado del cliente. Hay un par de líneas de código, pero quiero que prestes atención solo a las líneas resaltadas. En primer lugar, hay una API llamada IATNextProvider que proviene de
React IATNext. Ten en cuenta que de esta manera vamos a instalar y usar un par de otros paquetes relacionados con IATNext. Así que asegúrate de que esto provenga realmente de
React IATNext. Después de decirte que prestes atención a esta API, aquí es donde puedes llamarla dentro del ámbito JSX. Vamos a envolver este componente del navegador de
Remix que proviene de
Remix, y vamos a ver la lógica de por qué necesitamos envolver este componente precisamente con esta API IATNextProvider. Pero para darte un poco más de contexto, lo que estamos envolviendo es que mientras este componente del navegador de
Remix es o debería ser utilizado por
React para hidratar el
HTML. Así que hay otra pista de por qué insisto y resalto estas líneas de código. En realidad, es muy importante ver el momento en que se va a hidratar. Cuando se van a cargar los archivos de traducción. Aquí están las respuestas para que las veamos juntos. En primer lugar, veamos por qué los archivos de traducción, ya sabes, deben cargarse antes de la hidratación. Bueno, probablemente empecemos a imaginar si los archivos de traducción no se cargan antes de que ocurra la hidratación. Imagina que la hidratación, digamos, lo siento, no imagines, pero cuando ocurre la hidratación, los usuarios ya pueden ver la interfaz de usuario con todos los estilos, ¿verdad? Pero la aplicación en sí aún no es interactiva. En este caso, los archivos de traducción aún no están listos y la hidratación ya ocurrió. Así que si quiero cambiar el idioma de inglés a japonés para ver hola, no puedo verlo porque en primer lugar estos valores de traducción aún no están listos. Basado en eso, si imaginamos que los archivos de traducción ya se cargaron antes de que ocurra la hidratación. Ahora sabemos que este caso funcionaría porque la aplicación ya es interactiva de alguna manera. Así que cuando ocurre la hidratación, la interfaz de usuario está lista con los estilos y los archivos de traducción ya se cargaron. Así que si quiero cambiar de inglés a japonés para decir hola, ahora puedo verlo porque los archivos de traducción ya se cargaron. Yendo un poco más en profundidad, digamos una pregunta basada en lo que vimos en el archivo de configuración del lado del cliente. Entonces, ¿por qué envolver, ya sabes, esta API de
Remix llamada navegador de
Remix con el código de API IATNextProvider que proviene de
React IATNext? Así que eché un vistazo a un poco más de detalles desde el nodo
6. Configuración de Internacionalización y Root.jsx
Las APIs useMemo y React Hope ayudan a capturar el resultado de los cálculos entre re-renderizaciones, mejorando el rendimiento. La internacionalización es clave para mejorar el rendimiento, y el uso de paquetes como Remix elimina la necesidad de implementar funciones desde cero. Los archivos de configuración del lado del servidor pueden identificar los idiomas preferidos de los usuarios y redirigirlos. En el archivo root.jsx, presta atención a la API useLoaderData, que recupera la configuración regional desde la función de carga. La API JSON simplifica el proceso de devolución de la configuración regional. Cambiar entre idiomas en el navegador demuestra la funcionalidad de traducción.
archivo
modules. Y aquí está lo que pude alcanzar. Así que utilizo el useMemo y la API
React Hope. Este
React Hope te permite capturar el resultado de los cálculos entre re-renderizaciones. Si lo explico de manera más sencilla, básicamente, si los valores de esta configuración de internacionalización y los espacios de nombres de los nombres predeterminados para traducir los archivos son iguales, entonces no vamos a activar la re-renderización porque eso te costaría mucho y no sería eficiente. Queremos evitar que no sea eficiente. Entonces, si los valores de estos cálculos son iguales, no activaremos la re-renderización. Pero si los valores se actualizan, entonces activaremos la re-renderización. Desde esta perspectiva, puedes ver que la internacionalización es clave para mejorar el rendimiento y debes tener en cuenta el rendimiento. Pero al usar todos estos paquetes, ya se tiene en cuenta. Así que no tienes que implementar este tipo de funciones desde cero en tu lado. Solo una pequeña información sobre cómo configurar el archivo de configuración del lado del servidor, en primer lugar, quiero mencionarte que la identificación de los idiomas preferidos de los usuarios y redirigirlos se puede hacer en el lado del servidor. Si quieres echarle un vistazo, aquí está el enlace y el archivo readme para que lo veas. Bien, pasemos a usar las configuraciones que hemos establecido hasta ahora en acción. Aquí vamos a ver el archivo llamado root.jsx en el directorio de la aplicación. Este es el archivo fundamental y importante en la aplicación
Remix. Aquí, presta atención a tres APIs que vienen del lado de
Remix. Comenzando por useLoaderData. Esta useLoaderData obtendrá la configuración regional desde la función de carga en la aplicación superior. Esta función de carga no es solo una función aleatoria que hemos definido. En cambio, es una API del
backend que proviene de
Remix y ya está conectada a través de useLoaderData. Esto significa que estas APIs ya están vinculadas entre sí. Entonces, lo que debemos hacer al final es obtener la configuración regional, ¿verdad? Esto significa que necesitamos devolver la configuración regional. Para hacer eso, podemos solicitar que la respuesta nos proporcione una configuración regional. Pero en lugar de definirlo escribiendo unas pocas líneas de código aquí para decir algo como nuevas cabeceras de respuesta, etc., puedes llamar a otra API llamada JSON que proviene de
Remix para completar este tipo de proceso en una línea de código. Bien, veamos cómo funciona en el navegador. Veamos, si cambio entre español e inglés, ahora puedes ver que los elementos de navegación del encabezado se están traduciendo. Y también el mensaje de saludo Hola también se ha traducido. Y también los botones de abajo, también. Para traducir esta parte de Hola, aquí está
7. Importación y Envoltura de Archivos de Traducción
En cualquier ruta de tu aplicación Remix, puedes importar el uso de traducción de react-ia-t-next y envolver la propiedad que proviene de los archivos traducidos. Tenemos dos archivos traducidos, con la propiedad 'greeting' establecida como el cuerpo. Sin embargo, confieso que utilicé parámetros de URL en lugar de traducir el texto. No queremos mantener archivos de traducción en el código fuente y queremos lograr URLs localizadas.
En cualquier ruta de tu aplicación
Remix, puedes importar este uso de traducción que proviene de react-ia-t-next. Y en función de lo que configuremos y creemos, todo lo que necesitamos hacer es envolver la propiedad que proviene de los archivos traducidos. Recuerda que creamos dos archivos traducidos, ¿verdad? Y en la propiedad, establecí el cuerpo como saludo. Así que eso es lo que estoy envolviendo. Aquí está el resultado que puedes ver. Y antes de pasar a la siguiente diapositiva, tengo una pequeña confesión para ti. Así que necesitas prestar atención a esto aquí en la ruta de URL, ves una pequeña barra inclinada que incluye los parámetros de URL, ¿verdad? Así que aquí están las tres confesiones de mi parte. Permíteme ser honesto, utilicé los parámetros de URL. Sí. Y eso no es algo que quisiera hacer. Y de hecho, al comienzo de esta charla, te dije que queremos evitar usarlo. Y en segundo lugar, ¿los desarrolladores necesitamos mantener los archivos de traducción? Si pensamos en el proceso o las configuraciones que hemos creado, ahora recordamos que hay dos archivos de traducción, ¿verdad? En inglés y japonés. No queremos mantener estos archivos de traducción en el nivel del código fuente, ¿verdad? Además, la tercera confesión. ¿Tradujimos este lux? No, no creo que lo haya traducido. En su lugar, utilicé los parámetros de URL. Aquí hay otro amigo mío en Twitter. Gracias de nuevo por tus comentarios. También consideró lo mismo. Si quiere dividir los archivos de traducción por ruta, es posible, pero es un poco engorroso. Por supuesto, no es ideal encargarse de todos estos archivos traducidos en el nivel del código fuente. No queremos hacer eso. Además, quiere saber cómo localizar las URLs. Permíteme ser claro sobre lo que queremos lograr durante el resto de mi charla. Queremos lograr URLs localizadas, ¿verdad? Y también, no queremos tener archivos de traducción en nuestro código.
8. Implementación de la Internacionalización con Remix
Remix puede implementar la internacionalización utilizando el paquete Remix IAT Next de NPM o un sistema de gestión de contenido. Storyblock es un CMS recomendado por su flexibilidad en la localización de contenido. Las diferentes opciones de CMS ofrecen diversas formas de estructurar y almacenar contenido localizado. Este enfoque implica almacenar el contenido localizado en carpetas dedicadas, asegurando una clara separación. Los traductores pueden trabajar en la traducción del contenido y en la gestión de dónde se almacena. Se pueden crear rutas dinámicas utilizando el enfoque de ruta plana en Remix, lo que permite crear fácilmente rutas dinámicas anidadas sin editar el código fuente.
Así que aquí tienes otro ejemplo. Sabes, basado en lo que vimos, como Remix en general, puede tener dos enfoques para implementar la internacionalización. En primer lugar, echamos un vistazo juntos a cómo usar este paquete NPM llamado Remix IAT Next. Y en segundo lugar, vamos a ver un ejemplo de sistema de gestión de contenido. Así que puedes elegir cualquier tipo de sistema de gestión de contenido o headless CMS que esté disponible. En esta charla, elegí Storyblock porque es el más cómodo, diría y el CMS más familiar para mí, el que más uso. Además, ofrece la mayor cantidad de opciones para configurar cómo quieres localizar el contenido en el lado del CMS. Pero no voy a hablar de cómo puedes implementar Storyblock y Remix. Esto se puede explicar en este tutorial, por ejemplo, un artículo de blog, para que puedas consultarlo fácilmente después de mi charla. Muy bien. Dependiendo del CMS sin cabeza o del CMS que elijas, te darán en promedio, de una a cuatro formas de estructurar y almacenar contenido localizado. Y como parte de ello, también te darán algunas posibilidades, no solo a ti, sino también a tus traductores y editores de contenido, para estructurar cómo quieren anidar estas rutas dinámicas. Me gustaría tener más tiempo para explicar y mostrarte todas estas cuatro formas, pero por cuestiones de tiempo, voy a mostrarte esta carpeta y la traducción. Este enfoque es bastante sencillo, porque como puedes ver, todo el contenido localizado se almacena en carpetas dedicadas. Así que no hay forma de que los traductores mezclen páginas y contenido localizado. Así que en primer lugar, antes de profundizar en cómo funciona a nivel de código fuente, voy a mostrarte cómo funciona en el navegador. Aquí estoy en la página de vista general del blog por defecto, que está en inglés. Y por supuesto, si voy a ver el viaje a Salt Lake City, todos estos, ya sabes, los artículos de blog en inglés para las páginas relevantes se almacenan en la carpeta. Y la URL local, digamos, no debería incluir ninguna parte, porque este es el idioma por defecto, ¿verdad? Pero si voy a esta misma página, el viaje a Salt Lake City en japonés, debería incluir JA, que significa el slug en japonés. Y también, el contenido se traduce en el lado derecho, puedes ver que tus traductores pueden trabajar para almacenar los valores traducidos del contenido. Y si vuelvo a la página anterior, que es la página de vista general del blog, también incluye JA en la URL. Y si vuelvo a la página de inicio por defecto, que está en la ruta más alta, no debería incluir ninguna parte, ni siquiera una n del slug del idioma, y por supuesto el contenido vuelve a estar en inglés. Así que de esta manera puedes ver que ya no tienes que lidiar con archivos traducidos en tu código fuente. En cambio, los traductores, que deberían ser los responsables de comenzar a traducir el contenido y gestionar dónde se debe almacenar, pueden tener toda la flexibilidad. Y aquí está la pequeña lógica de cómo puedes crear este tipo de lógica de ruta dinámica. En Remix, hay un par de formas de, digamos, renderizar este tipo de rutas dinámicas. Pero elegí este enfoque de ruta plana, porque al usarlo, permitirás a quien quiera crear páginas e incluso crear rutas dinámicas anidadas desde el sistema de gestión de contenido. Pueden hacerlo
9. Implementación de rutas dinámicas con Remix
Una vez que implementes esta función, las rutas dinámicas, incluyendo estructuras anidadas, se pueden hacer desde el lado del CMS. Remix proporciona un parámetro útil llamado params, que muestra la ruta dinámica completa de las páginas. Esta lógica se utiliza para renderizar las rutas dinámicas, incluyendo las rutas anidadas.
que sin que lo sepas, como editar cualquier código fuente. Así que una vez que implementes esta función, utilizando esta ruta plana, entonces ya sabes que las rutas dinámicas, incluso las estructuras anidadas, se pueden hacer desde el lado del CMS. Así que aquí está el pequeño ejemplo. Ya conoces este uso de loader
data y JSON, ¿verdad? Así que voy a prestar más atención a estas líneas de código resaltadas en verde.
Remix ya te proporciona un parámetro muy útil llamado params. Y si digamos que haces un log de estos params con corchetes cuadrados y un valor de cadena de asterisco, como puedes ver en el código fuente. Cuando vas y vienes entre diferentes páginas, te mostrará, ya sabes, la ruta completa, la ruta dinámica completa de las páginas que estás viendo. Así que estamos utilizando esta lógica para renderizar todas estas rutas dinámicas, incluyendo las rutas anidadas. Así que aquí tienes un pequeño resumen de lo que vimos juntos en mi charla, sabemos que más de la mitad de los usuarios en este mundo acceden a contenido localizado. Y no podemos simplemente ignorar, ya sabes, a más de la mitad de los usuarios en este mundo, ¿verdad? Y también vimos juntos varias formas de hacer la internacionalización. Así que espero que te haya sido útil para elegir la mejor forma para tus casos, así como sabemos que, ya sabes, implementar la internacionalización importa mucho para pensar en un mejor rendimiento, también en la interfaz de usuario y la experiencia de usuario. Así que considera el rendimiento y la interfaz de usuario, la experiencia de usuario también con la internacionalización. Hay una pequeña solicitud de mi parte para ti al final. Así que por favor envíame tus comentarios. Ya sabes, en Twitter, realmente me encantaría mejorar mis charlas en general, cualquier comentario me ayudará a mejorar. Así que puedes mencionar mi nombre, mencionar mi nombre de usuario en Twitter y tuitear sobre los comentarios. Muy bien, eso sería todo de mi parte. Muchas gracias por ver mi charla y espero que la hayas disfrutado.
React Summit 2022
Comments