AsyncLocalStorage vs. React Context

Rate this content
Bookmark

AsyncLocalStorage es una API moderna que se ha implementado en muchos entornos de ejecución de JavaScript. Permite a los desarrolladores pasar un valor a una función de devolución de llamada sin necesidad de acceder directamente a una referencia directa. En este sentido, es similar al Contexto de React. Sin embargo, aunque tienen un propósito algo relacionado, especialmente en el mundo de los Componentes de Servidor de React, existen diferencias significativas y un momento adecuado para usar uno sobre el otro.

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

 Greg Brimble
Greg Brimble
8 min
18 Jun, 2024

Comments

Sign in or register to post your comment.

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

Short description:

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

Short description:

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.

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.
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.

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.