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.

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

Simplifying Server Components
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Top Content
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)