Video Summary and Transcription
La charla de hoy explora los conceptos de almacenamiento local asincrónico y el contexto de React. El almacenamiento local asincrónico es una API útil para recuperar valores de un componente padre sin pasarlos a través de múltiples componentes. Por otro lado, el contexto de React permite la creación de instancias de contexto en componentes padres y su consumo en componentes hijos. La charla también discute las acciones del servidor en React, sus limitaciones y el uso del almacenamiento local asincrónico en las acciones del servidor, con un ejemplo de un trabajador de Cloudflare que maneja solicitudes web y autenticación.
1. Introducción a Async Local Storage
Hoy voy a hablar sobre async local storage y el contexto de React. Async local storage, estandarizado por WinterCG, es una API útil para aplicaciones complejas que necesitan recuperar valores de un componente padre. Te permite evitar pasar valores a través de múltiples componentes. Para usar async local storage, importas el módulo de los ganchos asíncronos de Node, creas una instancia y llamas al método run con un valor y una función de devolución de llamada. Luego, dentro de la función de devolución de llamada, puedes usar el método get store para recuperar el valor.
¡Hola, gracias por sintonizar! Hoy voy a hablar sobre async local storage y el contexto de React. Async local storage es una API estandarizada recientemente, estandarizada por WinterCG y proviene de Node.js. WinterCG es el grupo de la comunidad responsable de estandarizar las APIs de JavaScript en estas nuevas ejecuciones de JavaScript, como Cloudflare, Deno, Vercel, Netlify, entre otros. Si no lo has visto antes, así es como puedes comenzar con async local storage. Primero importas el módulo desde algo llamado ganchos asíncronos de Node. Puedes crear una instancia del almacenamiento, a menudo abreviado como ALS. Luego puedes llamar al método run en esa instancia de almacenamiento, proporcionando un valor y una función de devolución de llamada. Y luego, desde dentro de esa función de devolución de llamada, puedes llamar a este método get store en tu instancia de almacenamiento. Y eso devolverá el valor que pasaste previamente cuando llamaste a run. Como puedes ver, es bastante sencillo y es especialmente útil si tienes una aplicación compleja de la que necesitas obtener valores, como un componente padre mucho más temprano en tu cadena de ejecución, y no quieres pasarlo a través de todos los componentes
2. Introducción a Contexto de React
El contexto de React tiene una API familiar. Creas una instancia de tu contexto en un componente padre, proporcionas un valor y luego llamas a un componente hijo para consumirlo. En una aplicación moderna de React, el cliente realiza una solicitud al borde, que se convierte en una solicitud de componentes del servidor de React y se envía al cálculo regional. El DOM serializado devuelto se traduce en HTML a través del renderizado en el servidor y se entrega al cliente. El cliente obtiene el JavaScript del borde, hidrata el HTML en una aplicación interactiva de React y puede realizar acciones del servidor que mutan la base de datos o el sistema de archivos.
A lo largo de tu aplicación, o si estás manejando JavaScript concurrente o algo así. De manera similar, el contexto de React tiene una API muy familiar. Entonces, nuevamente, importas desde el módulo de React. Creas una instancia de tu contexto dentro de un componente padre, puedes proporcionar un valor y luego llamar a un componente hijo, y ese componente hijo puede usar una función para recuperar ese valor del padre. Como dije, muy similar a ALS, y de hecho, hay básicamente solo esos tres puntos, crear la instancia, un padre que lo llama con un valor y un hijo que puede consumirlo. Entonces, si damos un paso atrás y recordamos cómo se renderiza una aplicación de React en estos días, porque ha cambiado un poco con React 18 y los componentes de React. Esto es solo un ejemplo de cómo podrías renderizar una aplicación moderna de React. El cliente realiza una solicitud al borde. Esto luego se convierte en una solicitud de componentes del servidor de React y se envía a algún tipo de cálculo regional. Esto está cerca de donde se encuentra tu base de datos o upstream o lo que sea que esté sucediendo. Luego, se realizan algunas tareas serias en el servidor. Esto puede estar hablando con un sistema de archivos o, como dije, una base de datos o una cosa SQLite o lo que sea. Y todo esto sucede lejos del usuario en el cálculo regional. Luego, el RC se traduce en algún tipo de DOM serializado. Es un formato muy interesante. Básicamente permite el streaming, ese tipo de cosas. Esto vuelve al borde. Luego, el borde convierte esto en HTML a través del renderizado en el servidor y lo envía de vuelta al cliente. El cliente tiene entonces una página HTML, pero necesita obtener el JavaScript para que sea interactivo. Entonces, solicitan eso desde el borde. Y debido a que es el borde, simplemente entrega el recurso directamente al cliente de manera rápida y rápida. Luego, el cliente realiza la hidratación en el lado del cliente. Eso significa convertir el HTML que tiene en la página en una aplicación de React interactiva real. Y luego, es posible que realmente queramos tomar medidas. Por ejemplo, puedo hacer clic en enviar en un formulario. Y eso enviará una acción del servidor a través de la red enviando los valores de mi formulario. Será intermediado a través del borde y terminará en la región. Y nuevamente, eso podrá realizar algunas tareas serias en el servidor. Eso puede estar mutando mi base de datos o accediendo al sistema de archivos. Lo que sea.
3. Explorando Acciones del Servidor y Compensaciones
Las acciones del servidor en React solo se ejecutan en el servidor y no están disponibles en el cliente. El contexto de React no es accesible dentro de las acciones del servidor. El contexto de React está limitado al cliente y al borde, mientras que el almacenamiento local asíncrono es una API exclusiva del servidor. El almacenamiento local asíncrono sirve como un puente entre la plataforma y la aplicación de React.
Entonces, si no lo has visto antes, así es como se ven las acciones del servidor. Tenemos un poco de pragma en la parte superior que dice, hey, esto solo se ejecuta en el servidor. No está disponible en el cliente. Puedes ver que estoy exportando una función. Solo toma un parámetro. Es esa forma de data que enviamos originalmente. Y puedes ver que el valor de retorno no es JSX. Puede ser cualquier objeto JavaScript. Esto es interesante. Ya sabemos que esto no se está ejecutando realmente como React normalmente lo hace. De hecho, aquí no tenemos ningún árbol. No estamos renderizando JSX. No hay contexto ni componente padre ni nada de eso. Entonces, el contexto de React en realidad no está disponible para nosotros dentro de una acción del servidor. Entonces, si volvemos a ver nuestro diagrama de red, ¿cuáles son las capacidades de cada una de estas piezas? Bueno, como dije, la región solo tiene la capacidad de lidiar con el contexto de React porque no tiene esa información. Solo tiene la pieza de acciones del servidor. Entonces, el contexto de React se limita solo al cliente y al borde. Pero por otro lado, el almacenamiento local asíncrono es una API exclusiva del servidor. No está disponible en el cliente. Entonces, tenemos este compromiso. De eso trata esta charla. Cuándo usar el contexto de React. Cuándo usar el almacenamiento local asíncrono. Y creo que el almacenamiento local asíncrono es más útil como una transferencia entre la plataforma y tu aplicación de React. Entonces, en lugar de tratar de mezclarlos constantemente y cambiar entre los dos, es mejor tratar el almacenamiento local asíncrono como ese puente entre tu plataforma, tu host, y
4. Usando Almacenamiento Local Asíncrono en Acciones del Servidor
Este ejemplo de Cloudflare worker maneja solicitudes web y autenticación. La instancia de almacenamiento local asíncrono se llama con valores útiles para manejar acciones del servidor. Puede acceder a la solicitud entrante, verificar encabezados y usar el entorno para acceder a la base de datos. La utilidad de contexto de Aviación, que utiliza almacenamiento local asíncrono, sirve como un ayudante para tareas concurrentes basadas en solicitudes de JavaScript.
la aplicación React. Entonces, este es un ejemplo de worker de Cloudflare. Vemos que estamos haciendo export default fetch. Eso básicamente significa, hey, vamos a manejar solicitudes web. Y estás obteniendo las solicitudes web entrantes. También estás obteniendo el entorno. Aquí es donde están disponibles todos los enlaces. Cualquier base de datos o algo así. Cualquier variable de entorno, secretos, ese tipo de cosas. También estamos realizando algún tipo de autenticación aquí. Estamos verificando que el usuario tenga permiso para acceder a nuestra aplicación. Y estamos obteniendo información sobre quién es ese usuario. Pero van a llamar a nuestra instancia de almacenamiento local asíncrono, su método run, con esos tres valores. Porque son útiles de alguna manera para mi aplicación React. Luego quiere usarlos para manejar acciones del servidor o lo que sea. Y así, manejar la aplicación React aquí es un método ficticio. Pero eso está haciendo el SSR en el borde o está manejando las acciones del servidor en el cálculo regional. Y para ver cómo se ve eso en las acciones del servidor, nuevamente tenemos nuestra acción del servidor ficticia aquí. Está importando esa instancia de almacenamiento desde nuestro punto de entrada y llamando a get store. Y puede usar esos valores. Está obteniendo información sobre la solicitud entrante. Puede verificar encabezados adicionales o lo que sea. Con el entorno, puedo acceder a mis bases de datos. Puedo verificar si esa solicitud de formulario entrante con su usuario y contraseña o lo que sea, es válida. Y el propio usuario está disponible, si ya he autenticado o algo así.
Entonces, realmente comencé con el almacenamiento local asíncrono construyendo un nuevo React meta framework. Se llama Aviación. Y como parte de eso, he publicado una utilidad de contexto de Aviación. Esto está disponible en NPM. Puedes instalarlo ahora. Utiliza almacenamiento local asíncrono y en su mayoría es solo una utilidad auxiliar para cualquier tipo de concurrente JavaScript basado en solicitudes. Echa un vistazo si quieres aprender más sobre cómo se puede utilizar el almacenamiento local asíncrono como una transferencia de plataforma. Entonces, nuevamente, comencé esta charla diciendo que es almacenamiento local asíncrono versus el contexto de React. Pero espero que ahora te des cuenta de que, de hecho, el almacenamiento local asíncrono es realmente el puente entre la plataforma y las aplicaciones de React. Muchas gracias por escuchar.
Comments