El Camino Rocoso de las Bibliotecas de Obtención de Datos en el Nuevo SSR de Transmisión de React

Rate this content
Bookmark

Si usas el directorio de aplicaciones Next.js, es posible que ni siquiera lo hayas notado, pero no solo estás usando Componentes de Servidor de React, sino que también estás usando la nueva característica de SSR de transmisión de React.

Eso significa que en la primera carga de página, tus Componentes de Cliente ahora serán renderizados en el lado del servidor, límite de suspense por límite de suspense, y constantemente transmitidos al cliente, donde son rehidratados pieza por pieza.


Si combinas eso con suspense para la obtención de datos en tus componentes de cliente, de repente te enfrentarás a desajustes de rehidratación - ya que tus componentes de cliente comenzarán a buscar datos en el servidor, pero los datos no serán transportados al cliente.


En esta charla, repasaré el camino rocoso que tuvimos que atravesar para soportar suspense para la obtención de datos en SSR de transmisión con Apollo Client, mirando todos los curiosos problemas de tiempo que surgen con estas tecnologías, y cómo intentamos resolverlos lo mejor que podemos - siempre con la mejor experiencia posible para el usuario y el desarrollador en mente.

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

FAQ

Suspense en React es una funcionalidad que permite a los desarrolladores manejar de manera asincrónica la carga de componentes o datos, posponiendo la renderización de una parte del componente hasta que ciertas condiciones se cumplan. Originalmente introducido para la carga perezosa de componentes, se ha extendido para utilizarse en la obtención de datos, especialmente con React 18, donde se renombró como modo concurrente.

Los desafíos incluyen la necesidad de manejar la obtención de datos de forma ad hoc, lo cual no es recomendado aún como estrategia general, y la falta de recomendaciones claras y APIs estandarizadas para gestionar de manera efectiva los estados de carga y los errores durante la obtención de datos en un entorno de Suspense.

El SSR es crucial para optimizar la carga inicial de las aplicaciones, realizando la obtención de datos y el renderizado del lado del servidor antes de enviar el HTML al cliente. Esto mejora el tiempo de carga percibido y es esencial en entornos donde Apollo Client y React se utilizan conjuntamente para gestionar estados y datos en aplicaciones complejas.

Suspense fue introducido primero con React Lazy en octubre de 2018 para la carga perezosa de componentes. Posteriormente, se expandió su uso para la obtención de datos con la llegada de React 18 en marzo de 2022, donde se renombró como modo concurrente y se le añadieron más características.

El uso de Suspense en Apollo Client implicó desafíos como la sincronización de datos entre el servidor y el cliente, manejo de caché y el correcto reenvío de datos necesarios para la rehidratación del estado del cliente. Estos problemas requieren soluciones específicas para manejar la obtención de datos concurrentes y el estado en entornos complejos.

Lancey sugiere la necesidad de APIs estandarizadas y específicas de la plataforma que permitan manejar mejor la obtención de datos y la rehidratación en React. Esto incluiría métodos para retrasar la descarga hasta que todos los datos necesarios estén listos y estrategias para manejar la rehidratación sin desajustes.

Lenz Weber-Tronic
Lenz Weber-Tronic
28 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute el viaje de las bibliotecas de obtención de datos en el nuevo SSL de transmisión de React, centrándose en el uso de suspense para la obtención de datos. Cubre la historia de suspense y la obtención de datos, el plan y la luz verde para su implementación, los desafíos con el enrutador de aplicaciones Next.js y SSR, el transporte de datos y el tiempo de vaciado, la importancia del tiempo y el transporte de datos, la rehidratación retrasada y el cierre de la transmisión, la necesidad de datos restantes y funcionalidades requeridas, los desafíos que enfrentan los usuarios de React vainilla, y las preguntas del público sobre los componentes del servidor de React.

1. Introducción

Short description:

Hoy voy a hablar sobre el accidentado viaje de las bibliotecas de obtención de datos en el nuevo SSL de transmisión de React. Es un tema frustrante, pero también muy interesante. Soy Lancey Bertronick, un ingeniero senior en Apollo GraphQL, trabajando en el cliente Apollo TypeScript y co-manteniendo el kit de herramientas Redux. Encuéntrame en Twitter como Fry o en GitHub como Frynias.

Hoy voy a hablar sobre—y tengo que leer esto—el accidentado viaje de las bibliotecas de obtención de data en el nuevo SSL de transmisión de React, y lamento mucho el título Y lamento mucho la charla. Desearía no tener que hacerlo, pero aquí estamos. Y es un tema frustrante, pero también es muy interesante. Ya me presentaron. Soy Lancey Bertronick. Soy un ingeniero senior en Apollo GraphQL, y estoy trabajando a tiempo completo en el cliente TypeScript Apollo. También soy co-mantenedor del kit de herramientas Redux y hago mucho otro código abierto. Tengo un TDAH. Tengo más hobbies de los que puedes contar. Puedes encontrarme en Twitter como Fry o en GitHub y en internet en general como Frynias.

2. La Historia de Suspense y la Obtención de Datos

Short description:

Vamos a sumergirnos en la historia de cómo comenzó el suspense para la obtención de datos en el cliente Apollo. En octubre de 2018, se introdujo React Lazy, permitiendo la importación perezosa de archivos y la división de paquetes. Unos meses después, se lanzaron las APIs de hooks. En marzo de 2022, React 18 trajo el modo concurrente y más características, incluyendo el cambio de nombre de Suspense. Sin embargo, el uso de Suspense para la obtención de datos todavía no se recomendaba. En la línea de tiempo del cliente Apollo, se lanzó React Apollo hooks con soporte de suspense en octubre de 2018. En septiembre de 2019, los hooks se fusionaron en el paquete del cliente Apollo, marcando la primera mención oficial de suspense para la obtención de datos.

Como dije, este es un tema frustrante para mí. Siempre hay una historia detrás. Así que vamos a ver la historia de un villano aquí. ¿Cómo empezó todo esto? Comenzó cuando quisimos añadir suspense para la obtención de data en el cliente Apollo. Y casualmente, en la última charla ya viste que eso funciona. Así que en este punto podría dejar el escenario y todo estaría bien. Pero no siempre fue así.

Así que volvamos atrás en la historia primero y hablemos de suspense primero, porque esto es algo que en realidad no estuvo en React para siempre. ¿Por qué estamos hablando de esto, este año? ¿No debería haber sido esto algo de lo que dejamos de pensar o hablar? Así que hablemos primero de la historia de suspense. Y volvemos a octubre de 2018 cuando se introdujo la primera cosa suspensiva en React y eso fue React Lazy, que te dio una forma de importar perezosamente archivos, hacer la división de paquetes, cargarlos más tarde y tener a React de alguna manera buscando la carga, como hacer el estado de carga para eso como detrás de las escenas sin que tú tengas que hacerlo. Um, en la misma línea de tiempo, unos meses después, las APIs de hooks salieron en febrero de 2019. Y en marzo de 2022, hubo un gran salto. React 18 salió y esencialmente todo el asunto fue como que ahora tenemos el modo concurrente como Suspense fue renombrado a modo concurrente y obtuvo muchas más características en un punto y estábamos realmente felices y estábamos como, sí, podemos empezar a hacer esto ahora. Pero luego bajamos por las notas de la versión y en algún lugar de ese artículo del blog había una nota al pie. Uh, en React 18, puedes empezar a usar Suspense para la obtención de data y marcos de opinión como Relay, Next.js, Hydrogen y Remix. Y esa fue la parte deprimente de esto, la obtención ad hoc de data con Suspense es técnicamente posible, pero aún no se recomienda como una estrategia general. Y sí, todos nosotros, como cada palanca de obtención de data estaba experimentando con eso, pero somos una buena community y estamos escuchando a nuestros señores de React. Así que no lanzamos realmente nada, especialmente no a propósito. Creo que algunas bibliotecas tuvieron algo por un tiempo y luego vieron esa frase después y la borraron de nuevo. Um, así que esa es la línea de tiempo oficial de react, por supuesto, hay una segunda línea de tiempo y esa es la línea de tiempo del cliente Apollo y quiero recordar quiero que te enfoques en este octubre de 18 en que estamos, en los tiempos pre hooks los hooks aún no han salido, pero hubo una charla en una conferencia sobre hooks justo. Ahora mismo. Um, y volvemos a octubre de 18 y alguien realmente lanzó una biblioteca llamada React Apollo hooks y esa biblioteca tenía soporte de suspense usando ese truco de React lazy. Y, sinceramente, me quedé boquiabierto cuando lo busqué porque no estaba al tanto de eso preparándome para esto. Y solo quiero decir, no sé quién lo hizo, pero felicitaciones a esa persona. Eres increíble. Um, eso fue un experimento realmente, realmente lindo y genial. Um, y en septiembre de 2019, así como medio año después de que los hooks de react salieron, y un poco después de que los hooks de Apollo habían estado en beta por un tiempo, hubo un problema en el que fusionamos los hooks en el paquete real del cliente Apollo. Y esa fue la primera mención oficial de suspense que pude encontrar en nuestros problemas. Ese fue el problema 5,357. Y dice cuando el suspense de react y el enfoque de obtención de data se finaliza.

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.
Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
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.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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.