El Debate "Renderizar al Fetch" vs "Fetch al Renderizar": Una Inmersión Profunda

Introducción

Este video es un poco un desastre, y todo se debe a un gran artículo de blog de Boba sobre la colocation de datos en componentes de React. Me emocioné mucho a lo largo del artículo, y el resultado fue un diagrama (en el que invertí demasiado tiempo) que creo que puede clarificar muchas malentendidos sobre la recuperación de datos de React.

El Debate

Recientemente, la comunidad de React pasó por un poco de drama, y no estoy aquí para recitar toda la saga. Pero, para resumirlo brevemente, ha habido un debate sobre la mejor manera de recuperar datos en aplicaciones de React. Los dos enfoques son "renderizar al fetch" y "fetch al renderizar". El primero implica recuperar datos y luego renderizar el componente, mientras que el segundo implica renderizar el componente y luego recuperar los datos.

El Problema con Waterfalls del Lado del Servidor

Uno de los problemas más grandes con waterfalls del lado del servidor es que requieren una cantidad significativa de carga cognitiva. Necesita identificar al usuario, recuperar los datos y luego renderizar el componente. Esto puede llevar a una gran complejidad y hacer que sea más difícil optimizar el rendimiento.

Los Beneficios de la Colocación

La colocación, por otro lado, permite recuperar datos y renderizar el componente al mismo tiempo. Este enfoque tiene varios beneficios, incluyendo:

• Reducción de la carga cognitiva
• Mejora del rendimiento
• Simplificación de la recuperación de datos

La Complejidad de RSCs

Mientras que Render-as-You-Fetch (RSC) soluciona algunos de los problemas con waterfalls del lado del servidor, introduce su propia lista de complejidades. RSCs requieren una lista de verificación exhaustiva de elevación de datos, routers de compilador, convenciones y más. Esto puede ser abrumador para los desarrolladores, especialmente aquellos que son nuevos en React.

La Importancia de DX

Al final del día, estamos aquí porque amamos React y queremos seguir impulsando la experiencia del desarrollador (DX) hacia adelante. Necesitamos encontrar una forma de resolver los problemas con la recuperación de datos de React sin hacer que se sienta como una biblioteca diferente.

Esto es el subtítulo de la imagen 1

Esto es el subtítulo de la imagen 2

Esto es el subtítulo de la imagen 3

Esto es el subtítulo de la imagen 4

Conclusión

En conclusión, el debate "renderizar al fetch" vs "fetch al renderizar" es complejo, y no hay una solución única que se adapte a todos. Necesitamos encontrar una forma de simplificar la recuperación de datos en React sin comprometer la DX que amamos. ¡Saludo a Boba por escribir el artículo que inspiró este video, y por favor, vea y comparta para que el diagrama en el que invertí demasiado tiempo sea worth it!