Guía para la carga diferida con React

Introducción

Cuando desarrollamos aplicaciones grandes de React, generalmente usamos muchas imágenes y videos, instalamos paquetes/bibliotecas de terceros, hacemos llamadas API y hacemos una variedad de otras cosas. Eso, naturalmente, aumenta el tiempo que lleva cargar nuestra aplicación y da como resultado un tamaño de paquete enorme, lo que contribuye a una experiencia de usuario deficiente. Ahí es donde carga lenta entra en su lugar Nos permite cargar el contenido. justo a tiempo, justo antes de que se muestre en la aplicación.

Podemos evitar la carga previa de contenido mientras aún está fuera de la vista y enfocar todos los recursos en el contenido que está en la vista.

En esta guía, veremos cómo usar React.lazy() y React.Suspense para implementar la carga diferida y la funcionalidad de división de código que nos permite manejar la división de código sin la necesidad de instalar bibliotecas adicionales.

¿Qué es la carga diferida?

Cuando iniciamos una aplicación web de React, generalmente agrupa toda la aplicación a la vez, cargando todo, incluidas las páginas completas de la aplicación web, las imágenes, el contenido y mucho más, lo que puede resultar en un tiempo de carga lento y un rendimiento general deficiente, dependiendo de el tamaño del contenido y el ancho de banda de Internet en ese momento.

Carga Diferida nos permite cargar componentes específicos solo cuando son necesarios. Por lo general, también realizamos división de código en componentes lógicos que también se pueden cargar de forma diferida con el contenido.

Por ejemplo, si tenemos una página de tablero que muestra mucha información de varias fuentes cuando se hace clic, siempre es mejor mantener estos componentes y páginas con carga diferida, de modo que solo se carguen cuando el usuario los necesite o los requiera.

Nota: El proceso de escupir un gran paquete de código en varios paquetes que se pueden cargar dinámicamente con el objetivo general de evitar problemas de rendimiento asociados con paquetes de gran tamaño se conoce como división de código. Esto se logra sin reducir la cantidad de código en nuestra aplicación.

En resumen, la carga diferida nos permite renderizar componentes o elementos bajo demanda, haciendo que nuestra aplicación sea más eficiente y brindando una mejor experiencia de usuario.

Nota: Aplicaciones de una sola página (SPA) están diseñados para contener todas las páginas y el contenido dentro de un solo documento/página. Es por eso que la carga diferida es especialmente útil cuando se desarrollan SPA.

Cómo implementar la carga diferida en React

Hasta ahora, hemos visto qué es la carga diferida y por qué es importante implementarla. Ahora, veamos cómo podemos implementarlo en nuestras aplicaciones React, utilizando dos características de React que facilitan la implementación de la división de código y la carga diferida: Reaccionar.lazy() y Reaccionar.Suspenso.

React.lazy() es una función que nos permite renderizar importaciones dinámicas de la misma manera que los componentes regulares. El uso de importaciones dinámicas junto con el React.lazy() nos permitirá importar un componente justo antes de que se muestre en una pantalla. Una cosa importante a tener en cuenta es que React.lazy() acepta una función como argumento; esa función debe llamar a la dinámica import() en su cuerpo

React.Suspense nos permite especificar la reserva apuntalar que toma un contenido de marcador de posición que se usaría como un indicador de carga mientras todos los componentes perezosos se cargan.

Comencemos viendo cómo podemos implementar la carga diferida en nuestros componentes importados y luego cómo podemos implementarla en nuestras rutas para que las páginas no se carguen hasta que naveguemos hacia ellas.

Cómo Empezar

Supongamos que tenemos nuestra aplicación React e importamos el About componente en el Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Ahora podemos implementar la carga diferida haciendo uso de React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Nota: React.lazy() utilizado de esta manera devuelve un Promise objeto. Esa promesa se resuelve en un módulo que contiene un componente React que queremos cargar de forma diferida en su default exportar.

Hemos implementado la carga diferida usando React.lazy(), pero el código anterior siempre arrojará un error diciendo que nuestro “React component suspended while rendering, but no fallback UI was specified”. Esto se puede solucionar envolviendo el componente con React.Suspensees fallbackz y adjuntando los apoyos alternativos como explicamos anteriormente:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Nota: El apoyo alternativo puede tomar un componente para mostrar antes de que se cargue el contenido original.

Además, podemos decidir desestructurar la importación de React para que el código sea más limpio y legible:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Hasta ahora, hemos visto cómo implementar la carga diferida en nuestros componentes importados. Ahora, veamos cómo implementarlo en nuestras rutas durante el enrutamiento con el enrutador React.

Cómo implementar la carga diferida con React Router

El enrutamiento diferido es en realidad una buena práctica para las rutas que tienen mucho contenido y pueden ralentizar el tiempo de carga de su aplicación. La implementación de la carga diferida para las rutas de React es casi idéntica a lo que hicimos anteriormente cuando cargamos diferidamente los componentes importados dinámicamente.

Las rutas React de carga diferida se refieren a la importación dinámica de un componente solo cuando es necesario. Por ejemplo, digamos que tenemos dos rutas en nuestra aplicación y dos componentes que representan esas rutas. Si implementamos el enrutamiento mencionado de la siguiente manera, cada componente se cargará solo cuando naveguemos a la ruta correspondiente:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Conclusión

En esta guía, aprendimos qué son la carga diferida y la división de código, cómo implementarlas y que el mejor lugar para implementar la carga diferida es con las rutas. Esto evita renderizar toda la página a la vez, lo que puede resultar en un tiempo de carga más lento cuando se trata de páginas con grandes cantidades de contenido.