Guía para la carga diferida con React

En este breve tutorial, veremos cómo importar la carga diferida en React. Aprenderá qué es la división de código, cómo cargar de forma diferida los componentes de React y cómo cargar de forma diferida las rutas de 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 entra en juego lazy loading. 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 funcionalidad de carga diferida y división de código que nos permite manejar la división de código sin 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.

Lazy loading 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 pueden cargarse de forma diferida con el contenido.

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

{.icon aria-hidden=“true”}

Nota: El proceso de dividir 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](https://reactjs. org/docs/code-splitting.html). 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.

{.icon aria-hidden=“true”}

Nota: Las aplicaciones de una sola página (SPA) están diseñadas para incluir todas las páginas y el contenido en 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()](https://reactjs.org/ docs/code-splitting.html#reactlazy) 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 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 import() dinámico en su cuerpo.

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

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.

Comenzando

Supongamos que tenemos nuestra aplicación React e importamos el componente ‘Acerca de’ en ‘Inicio’:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React from 'react';

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

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

{.icon aria-hidden=“true”}

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

Implementamos la carga diferida usando React.lazy(), pero el código anterior siempre arrojará un error que dice que nuestro “El componente React se suspendió mientras se renderizaba, pero no se especificó ninguna interfaz de usuario alternativa”. Esto se puede solucionar envolviendo el componente con React.Suspense's fallbackz y adjuntando los apoyos alternativos como explicamos anteriormente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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;

{.icon aria-hidden=“true”}

Nota: El apoyo alternativo puede tomar un componente para mostrarse 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 perezoso 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
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.