Suspenseful Component Composition

Hola, hoy quiero hablarles sobre la Composición de Componentes Suspenseful. Mi nombre es Simeon Griggs. Soy un Educador Principal en Sanity. Puede que conozcan Sanity como un CMS o un Sistema Operativo de Contenidos. Pueden encontrar más información en sanity.io. Pero antes que nada, quiero ver algunas de las publicaciones de blog que he escrito.

Si desean ver esto, hay más detalles en ellas. Primero que nada, esta publicación de blog sobre el problemático prop de Suspenseful, es por eso que el prop de fallback en el componente suspense es tan fácil de crear un cambio de diseño, hay algo en el diseño de la API que se presta para eso. Además, tengo una publicación de blog explorando el componente de actividad, que acaba de salir de React experimental y ahora es estable, lo cual es muy genial también. No cubriré eso hoy, pero esa publicación de blog cubre más sobre eso.

La experiencia que he tenido trabajando con la obtención de datos suspenseful proviene en gran medida del Sanity App SDK, al que pueden ir y tomar otro curso si desean explorar más también. Y eso es lo que voy a estar demostrando hoy. Tiene una biblioteca de obtención de datos habilitada para suspense, pero hay muchas maneras de trabajar con datos suspenseful en una aplicación React. Entonces, ¿qué es suspense? Es una parte relativamente nueva de React si no lo han usado antes. Es una forma de capturar un límite alrededor de elementos si están obteniendo datos. También es una forma de cargar componentes de manera diferida para la división de código. Así que tiene algunos usos particulares, pero esto es lo que ven cuando van a la documentación de React sobre suspense.

Ven suspense envuelto alrededor de algún componente con un prop de fallback. Y así, cuando algún componente se está cargando, lanzará esa promesa a este límite de suspense más externo, y renderizará el componente de fallback en su lugar. Y esto es muy simple. Y este es un gran ejemplo porque es así de simple de implementar, pero ese algún componente allí, si no tienen cuidado, puede realmente renderizar un cambio de diseño muy fácilmente. Así que voy a demostrar esto en una aplicación simple que hace su propia obtención de datos. Vamos a ver la demostración ahora. Así que en el lado izquierdo, tengo mi aplicación básica aquí con el proveedor de SDK. Eso solo configura algunas cosas para la obtención de datos. Y tengo mi componente de diseño allí, que está renderizando esta aplicación de tabla en el lado derecho aquí. He deshabilitado la caché en mis configuraciones de red aquí porque el Sanity App SDK contiene su propia caché del lado del navegador, y no quiero que se muestre. Así que algunas de estas obtenciones pueden parecer lentas, pero eso es porque estamos obteniendo deliberadamente desde la fuente cada vez. Así que si recargo la página, ¿cómo se ve ahora? Obtengo un gran componente de carga en su mayoría, y luego, una vez que todo está cargado, todo aparece de golpe. Y así es como se ve hacer la implementación más básica de suspense.

Echemos un vistazo a por qué. Si nos adentramos en el proveedor del SDK aquí, veremos que tiene un prop de fallback aquí porque el proveedor de recursos en sí, esa es una biblioteca que proviene del SDK, tiene ese prop de fallback. Tiene su propio límite de suspense. Y así estamos renderizando ese fallback allí. Así que aunque hay obtención de datos ocurriendo profundamente dentro de estos componentes que veremos en un momento, solo retrocederá al límite de suspense más externo. Así que como ninguna de las otras obtenciones de datos en esta aplicación tiene sus propios fallbacks, siempre vamos al elemento más externo.

Así que vamos a sumergirnos en la aplicación para ver por qué es esto. Así que al adentrarnos en el componente de diseño aquí, podemos ver que tengo mi estado de filtro, tengo una función aquí para manejar el cambio de filtro. Eso solo maneja esta cadena aquí para filtrar estos elementos. Luego tengo un hook de documentos usados. Y así esto viene del React SDK, el Sanity React SDK, lo siento. Y esta es nuestra obtención de datos que está habilitada para suspense. Así que va a lanzar en un límite de suspense. Luego tengo todos los elementos del componente para esta tabla. Así que realmente la mayor parte de este diseño se renderiza dentro de este componente y exploraré por qué eso es problemático en un momento.

Luego tenemos una lista de cursos. Así que obtuvimos todos esos datos en este elemento más externo, luego renderizamos esta lista de cursos, que es cada fila individual que se está renderizando y dentro de cada fila individual, también tiene un hook de documento usado. La forma en que el React SDK para Sanity funciona es que cuando obtienes un montón de documentos, solo se te devolverá un montón de manejadores de documentos, que son como identificadores de documentos, que luego necesitarás usar ese manejador para obtener los detalles completos de ese documento. Y eso significa que cada fila está haciendo su propia obtención de datos así como la tabla más externa está haciendo su obtención de datos. Puedo mostrarte cómo se ve eso aquí.

Ya tengo un ejemplo. Cada fila solo tiene acceso a esta información. No tiene ese título o la información de visibilidad. Solo tiene un identificador sobre los documentos. Es por eso que cada fila tiene que hacer su propia obtención de datos allí. Y así, los problemas que tenemos es que solo hay un límite de suspense en el elemento más externo.

Si introducimos un límite de suspense en cada fila, al menos podemos obtener spinners de carga o un fallback de carga en cada fila individual. Y ese es un buen lugar para comenzar. Así que vamos a obtener suspense de React y moveremos la clave a ese elemento allí. Y ahora tengo límites de suspense alrededor de esto, pero necesitaremos proporcionar un fallback.

No quiero el error de la fila de la tabla todavía. Digamos simplemente que queremos el texto de carga porque esto es lo que comúnmente verás en ejemplos sobre cómo usar suspense. Y así, si actualizo la tabla ahora, deberíamos ver ese texto de carga en cada fila. Pero puedes ver que no es una gran experiencia. Viste ese cambio de diseño. Así que los elementos que se cargaron eran de un tamaño diferente a los elementos que se renderizaron una vez que la carga había terminado.

Y así de fácil es hacer un cambio de diseño cuando estamos tratando con suspense. Idealmente, queremos que el elemento que está indicando el estado de carga sea del mismo tamaño exacto que el elemento que se renderizará una vez que la carga se haya completado. Así que en lugar de renderizar solo esta palabra de carga, si echamos un vistazo a los datos de la fila de la tabla, podemos ver que está compuesto por una fila, una celda y hay un botón de insignia.

Así que podemos recrear esos elementos y he creado uno de antemano aquí. Vamos a echar un vistazo al esqueleto de la fila de la tabla. Aquí, si creamos un componente que sea exactamente el mismo componente que el elemento hijo, eso significa que nuestro fallback y nuestros hijos pueden ser exactamente iguales. Así que en lugar de simplemente poner la palabra loading, vamos a incluir también nuestro esqueleto. Es el esqueleto de la fila de la tabla. Vamos a incluirlo. Y si recargamos la página ahora, deberíamos ver ahí vamos, cada elemento cargado individualmente. Y eso fue mucho mejor.

Las filas no cambiaron de tamaño solo porque los datos se habían cargado. Cada una apareció con el mismo tamaño exacto que el elemento hijo. Así que este es un consejo realmente bueno. Así que tengamos esto en cuenta. Necesitamos asegurarnos de que nuestros elementos de fallback sean siempre del mismo tamaño que los hijos que los reemplazarán. Realmente no hay excusa para el cambio de diseño aparte de que no te tomaste el tiempo para asegurarte de que ambos elementos sean del mismo tamaño. Aún no es perfecto, sin embargo.

Si recargamos esto de nuevo, veremos cómo toda la tabla está suspendida debido a la obtención de datos que ocurre en la tabla. Y no hay razón para suspender estos botones de radio o estos encabezados de tabla porque no dependen de los datos que se están obteniendo. Solo las filas lo están. Así que lo que realmente deberíamos hacer es mover en el componente de diseño aquí, nuestra obtención de datos para esos cursos, todos estos elementos no necesitan ser suspendidos solo porque eso está ocurriendo. En su lugar, vamos a bajar a nuestro componente de cursos y mover la obtención de datos allí.

Así que vamos a cambiar. Haremos algunas importaciones aquí y dejaremos que el cursor arregle el resto. Todavía necesitaremos esos valores de filtro o el valor de cadena de filtro de esos botones de radio, pero usaremos eso para pasar a este componente en su lugar. Y si volvemos a nuestro diseño, cambiaremos eso al filtro. Y probemos esto de nuevo. Así que podemos ver que la experiencia de carga es mucho más fluida que antes porque no estábamos suspendiendo todo el elemento de la tabla más externo solo para la obtención de datos. En realidad, solo estamos suspendiendo la parte más interna. Así que hemos movido toda la obtención de datos aquí abajo y es solo donde se está renderizando el contenido. Recarguemos eso una vez más para visibilidad.

Y esta es una experiencia mucho mejor. Si estás acostumbrado a construir estáticos o páginas renderizadas del lado del servidor, probablemente estés acostumbrado a un patrón de hacer toda tu obtención de datos en la parte superior y luego pasar eso como props a lo largo del árbol. Donde particularmente con esta biblioteca de obtención de datos y con muchas aplicaciones de obtención de datos habilitadas para Suspense que construirás, es mucho mejor hacer muchas obtenciones, siempre que haya almacenamiento en caché y todo eso involucrado también, pero hacer esas muchas obtenciones lo más cerca posible de los componentes que se están renderizando es realmente la clave. Así que otro consejo que me gustaría que te llevaras de esta masterclass aquí es asegurarte de que siempre muevas la obtención de datos lo más cerca posible de donde se van a renderizar esos datos. Y ahora, si la obtención habilitada para Suspense es nueva para ti y todo este asunto de la suspense boundary es nuevo para ti, como lo fue para mí antes de usar esta biblioteca en particular, podría hacerte sentir un poco incómodo tener que usar este componente absolutamente en todas partes. Se siente un poco tonto. Te permite controlar dónde están esos límites y hay instancias donde querrás ser muy determinista sobre cuándo la suspense boundary está cerca de ese elemento o cuándo está bien capturar ese límite más arriba en el árbol.

Te hace pensar que quizás sería mejor simplemente exportar toda la suspense boundary como lo hace el propio proveedor del SDK. Así que si dijéramos en su lugar, vamos a la tabla, datos de fila de tabla suspendidos y en realidad exportar, oh, no te adelantes demasiado, eso va a arruinar la sorpresa para el próximo, vamos a importar suspense. Aquí, si exportamos toda la suspense boundary, entonces no necesitamos preocuparnos por incluir suspense justo aquí. Y así podemos obtener ese mismo componente que antes, pero este incluirá la suspense boundary para asegurarse de que siempre esté suspendido. Esto funciona dentro de tus propias aplicaciones y probablemente esté bien la mayor parte del tiempo, pero ten en cuenta que si estás construyendo una biblioteca, algo que va a ser distribuido, entonces suspense podría usarse para la división de código o la carga diferida de componentes. Y por lo tanto, podría ser menos que ideal usar en esos casos.

Pero en tu aplicación, si esto ordena un poco tu código y asegúrate de que cada vez que se importe este componente, que la suspense boundary esté incluida con él, bueno, entonces probablemente valga la pena considerarlo también. Así que el tercer consejo aquí es considerar exportar la suspense boundary donde tenga sentido para limpiar tu código solo un poco.

Por último, no siempre está garantizado que tu biblioteca de obtención de datos vaya a devolver una respuesta correcta. A veces puede haber errores de red y eso podría ser algo en la computadora de tu navegador, en las extensiones del navegador de tu usuario jugando una mala pasada o algo en tu backend que no está devolviendo correctamente. Así que es bueno ser defensivo contra esos problemas. Así que si echamos un vistazo a nuestros datos de fila de tabla suspendidos, es tan buen lugar como cualquier otro para lanzar esto aquí. Podemos ir y tomar un error boundary. Un error boundary se instala a través de un paquete diferente.

Así que este es el paquete React error boundary, pero aquí es donde sería bueno tener no solo un esqueleto de fila de tabla, sino un componente de error de fila de tabla aquí. Así que si echamos un vistazo a eso, tengo este componente de error de fila de tabla. Tiene los mismos elementos que antes. Así que nuevamente, no debería haber cambio de diseño, pero solo renderiza algún tipo de error y sería bueno capturar ese error y mostrar algo mucho más útil en un botón de reinicio o botón de actualización, algo así para poder hacerlo.