Escalando el Rendimiento de React: De Técnicas Básicas a Avanzadas de División de Código

Hola a todos, soy Gil. Soy un arquitecto de rendimiento en Wix, y hoy quiero guiarte a través de cómo usamos varias técnicas de división de código para mejorar el rendimiento de los sitios web de Wix. La división de código nos permite descomponer JavaScript en fragmentos más pequeños o en React en múltiples componentes, y cargarlos solo cuando sea necesario, asegurando que los usuarios descarguen solo el código que necesitan. Al aplicar estas técnicas, reducimos significativamente el JavaScript enviado al lado del cliente, llevando a una gran mejora en la experiencia del usuario.

Como mencioné, soy un arquitecto de rendimiento en Wix, lo que significa que mi enfoque está en mejorar el rendimiento de millones de sitios web de Wix. Dado que usamos y dependemos mucho de React, una parte significativa de mi trabajo implica depurar el rendimiento de las aplicaciones de React, porque esencialmente cada sitio web de Wix es una aplicación de React. Dada la amplia gama de características que ofrecen los sitios web de Wix, la división de código es absolutamente esencial para nosotros. Las técnicas que estoy a punto de compartir han tenido un gran impacto. Pero antes de profundizar en los métodos específicos de división de código, me gustaría explicar cómo medimos el rendimiento en Wix. En producción, medimos el rendimiento usando Core Web Vitals, un conjunto de métricas desarrolladas por Google para evaluar el rendimiento de sitios web en vivo. Específicamente para la carga de JavaScript, nos enfocamos en INP, que significa interacción al siguiente renderizado, que evalúa la interactividad del sitio web. En el gráfico, puedes ver las puntuaciones INP para Wix y nuestros competidores reportadas por Google. Dado que la interactividad está estrechamente ligada a la carga de JavaScript, reducir la cantidad de JavaScript mejora significativamente el INP. Cuando un sitio web carga más JavaScript, el hilo principal se ocupa más con el análisis y la ejecución de código. Esto lleva a un retraso en los eventos desencadenados por el usuario, como, por ejemplo, clics y desplazamientos, lo que a su vez afecta negativamente la interactividad y el INP. Así que como puedes ver en el gráfico, mejoramos significativamente nuestras puntuaciones INP, pasando de una muy baja puntuación a lograr una de las mejores puntuaciones INP en comparación con nuestros competidores. Esta mejora se debe en gran medida a las técnicas de división de código que estoy a punto de compartir contigo hoy.

Ahora, vamos a profundizar en las diversas estrategias de división de código que usamos para minimizar la descarga de JavaScript en nuestras aplicaciones de React. La primera es la importación dinámica, y hay algunas maneras en que usamos importaciones dinámicas en nuestra aplicación de React. Así que la forma más básica en que usamos importaciones dinámicas es cargando componentes de React dinámicamente después de la interacción con React Lazy. Veamos un ejemplo de código corto y básico para esto. Así que como puedes ver, estamos usando importaciones dinámicas, y estamos usando React Lazy. Y esto es, por supuesto, para no agrupar, en este caso, el componente collapse en el paquete principal porque queremos cargarlo solo después de que el usuario haya abierto algún otro componente. Así que estamos usando React State para manejar el estado si debemos mostrar el componente o no. Y luego, basado en el estado, renderizamos el componente, el componente Lazy con suspense, y solo entonces, solo cuando el componente se renderiza, React cargará e hidratará el componente porque estamos usando React Lazy. Así que suspense tiene un fallback, y es importante porque el componente no se muestra hasta que está cargado. Así que necesitamos un fallback para eso. Pero luego React renderizará el componente. Así que un ejemplo muy básico. Estoy seguro de que muchos de ustedes ya conocen esto.

Pasemos a un poco más. Pasemos a ejemplos un poco más avanzados. El segundo ejemplo, que es similar pero un poco más avanzado, es cargar componentes condicionalmente al cargar la página, no en interacciones del usuario. Así que nuevamente, el ejemplo, este ejemplo será de una sección de comentarios en una página de producto. Solo queremos mostrar la sección de comentarios solo si hay comentarios. Así que queremos cargar condicionalmente el componente. Al cargar la página, no es en la interacción del usuario. Así que la página de producto nuevamente usará los estados, ahora los datos de comentarios, y podemos, usando el use effect, obtendremos los datos de los comentarios y luego los pondremos en el estado. Y luego, si hay comentarios en los datos de comentarios, si hay algo en el array, queremos renderizar la sección de comentarios. Así que cuando la página se carga, queremos cargar e hidratar el componente solo si hay comentarios en los datos de comentarios. Así que un poco diferente de los ejemplos anteriores, pero aún similar. Vale la pena mencionar que si estás usando la renderización del lado del servidor y estamos usando SSR en nuestra aplicación, este método no era compatible en React 16. Solo es compatible en React 18. No era compatible antes de React 18. Lo que no era compatible es en realidad el hecho de que suspense no funcionaba en SSR. Solo funcionaba en el lado del cliente. Ahora funciona en SSR, y podemos usar este método también para SSR. El ejemplo para SSR es un poco diferente porque aquí usamos use effect, que solo funciona en el lado del cliente. Así que veremos el ejemplo completo del servidor más tarde.

Y el último ejemplo que voy a dar para importaciones dinámicas es cargar componentes de React dinámicamente en interacciones de desplazamiento o desplazamiento del ratón con suspense. Ahora, la diferencia entre esto y el primer ejemplo es que esos componentes ya están renderizados con SSR. Si no están renderizados con SSR, es exactamente el mismo ejemplo. Pero dado que esos componentes ya son visibles desde la renderización del lado del servidor, solo queremos descargarlos e hidratarlos con suspense. Así que por eso se está volviendo más complicado.

Y al igual que el otro último ejemplo, no es posible antes de React 18. Solo es posible con el nuevo suspense en la renderización del lado del servidor. Así que veamos este ejemplo. Este no es un ejemplo completo. Tuve que eliminar algo de código, para que tenga sentido mostrarlo. Pero pondré el ejemplo completo en los comentarios de esta presentación.

Así que nuevamente, estamos usando react-lazy con importaciones dinámicas. Y tenemos un componente bajo default. Y queremos renderizarlo solo cuando entra en el viewport. Nuevamente, como dije antes, ya es visible y está renderizado. El HTML incluye esto porque fue devuelto desde la renderización del lado del servidor. Pero solo queremos descargarlo e hidratarlo cuando esté en el viewport. No queremos descargarlo cuando la página se carga. Así que creamos una promesa que realmente se resuelve cuando el componente, cuando un ref entra en el viewport. Usamos interaction observer.

Y ahora creé este envoltorio de descarga en el viewport. Crea un ref, que colocamos en el div principal. Porque luego lo usamos en el intersection observer. {{^}}Y ahora creo una promesa con el resolver y una promesa. Y paso esta promesa a un viewport y al envoltorio. Lo mostraré en un segundo. Pero resuelvo la promesa con el intersection observer que acabo de crear.

Así que tengo una promesa que se resuelve cuando se llama al callback del intersection observer, básicamente cuando mi componente entra en el viewport. Así que ahora la parte complicada. Uso el viewport y el envoltorio, que llama a una función llamada use, que no puedes ver la implementación aquí. Lo hice. Es una implementación algo complicada, que utiliza la nueva API de suspense de React. Pero React, no está muy bien documentado, si es que está documentado en la documentación de React. Pero dijeron y publicaron la documentación en React 19. Así que en React 19, podrás usar esta función. Así que si puedes, probablemente querrás esperar a React 19 para usar la nueva implementación de use. Pero si quieres usarlo en React 18, puedes. Y lo usamos en React 18. Y pondré el ejemplo completo, nuevamente, en los comentarios.

Pero por ahora, confía en mí que esta función use también funciona en React 18. Pero solo tienes que usar la API de suspense. Así que nuevamente, esta función use se utiliza solo para gestionar la promesa. Espera a que la promesa se resuelva. Y solo después de que se resuelva, renderiza a los hijos, que son en realidad nuestros componentes en el default. Así que nuevamente, el componente suspense se renderiza. Y al principio, esa promesa no está resuelta. En realidad está esperando ser resuelta solo cuando los componentes entran en el viewport. Y solo cuando se resuelve, renderiza a los hijos. El suspense en realidad gestiona esta promesa. Así que más estrategias que usamos en code splitting además de la importación dinámica.

Una gran cosa que hicimos para mover JavaScript lejos del lado del cliente, para no cargar JavaScript en el lado del cliente, es mover el cálculo de props al lado del servidor y obtenerlos en el componente React. En lugar de calcular props en el componente React, los movemos a una función en el lado del servidor. Y si quieres saber más, puedes ver mi charla de la conferencia del año pasado, en la que hablé exactamente de cómo lo hicimos y de toda la arquitectura de la solución.

Pero en realidad, solíamos hacerlo mucho antes de React 18. Pero ahora en React 18, puedes hacerlo de manera mucho más simple en un componente del servidor. Así que quiero mostrar un ejemplo simple de esto. En realidad funcionará no solo en Next.js, pero el código más básico está en Next.js, porque Next.js implementó la API dinámica, que es muy fácil de usar. Puedes usar la nueva API de suspense, pero es más complicada. Pero usando la API dinámica, es muy simple. Básicamente usas importaciones dinámicas con la API dinámica. Y este ejemplo también combina renderizar condicionalmente componentes en SSR y también calcular los props en SSR.

Así que imagina que tengo un botón, que puede renderizar un enlace o un botón de icono personalizado. Depende de algún tipo que obtenga en el prop, así que renderizando condicionalmente componentes React. Entonces puedes elegir qué componente React quieres renderizar. Calculas los props. Tal vez sea una función complicada que no quieres descargar y ejecutar en el lado del cliente. Entonces básicamente solo renderizas el componente, y este es un componente del servidor. Así que React solo descargará y renderizará el componente que realmente quieres descargar. Y nuevamente, es una gran manera de hacer code splitting y realmente solo descargar el código que quieres en el lado del cliente y hacer los cálculos pesados en el lado del servidor.

Así que para resumir, las principales estrategias de code splitting que usamos en el rendimiento son, como dije, importaciones dinámicas, lo que significa cargar y renderizar dinámicamente componentes con React lates en suspense y mover JavaScript al lado del servidor, lo que significa tanto renderizar condicionalmente componentes como calcular los props de los componentes en el lado del servidor. Puedes hacerlo de la manera antigua, simplemente obteniendo los props del servidor de la manera en que lo hicimos, o usar la API dinámica de Next y usar los componentes del servidor y hacerlo allí. De cualquier manera, todas esas opciones te ahorrarán mucho código JavaScript en el lado del cliente y harán que tus usuarios estén mucho, mucho más felices.