Carga diferida (Lazy Loading) en las rutas

Vamos a ver cómo utilizar la carga diferida (Lazy Loading) dentro de una aplicación React.

¿Qúe es el lazy loading?

El lazy loading, es una técnica de optimización que consiste en cargar y mostrar elementos (como imágenes, componentes o módulos) solo cuando son necesarios, es decir, cuando están en el área visible del usuario o próximos a serlo. Esta técnica ayuda a mejorar la velocidad de carga inicial y el rendimiento general de una aplicación web al reducir los recursos cargados innecesariamente.

En el ejemplo que veremos a continuación, nos enfocaremos en el uso del lazy loading en las rutas de una aplicación React.

  import { lazy, Suspense } from 'react'

  function App() {
    // Como ya lo importamos desde el lazi no hace falta importarlo de otro lado
    // Esto va a hacer el componente no se cargue hasta que sea necesario
    const Login = lazy(() => import('./pages/Login/login'))
    const Home = lazy(() => import('./pages/Home/Home'))
    // Y ya esta, no hay más vueltas que darle
    return(
      <div>
        // El Suspense sirve para que se cargue un elemento mientras carga otro.
        // Por ejemplo, se puede poner un spinner o una pantalla de carga.
        <Suspense fallback={}>
          <BroweserRouter>
            <Routes>
              <Route path="/home" element={<Home/>}/>
              <Route path="/login" element={<Login />}>
            </Routes>
          </BroweserRouter>
        </Suspense>
      </div>
    )
  }

En este ejemplo, utilizamos la función lazy de React para importar los componentes Login y Home de forma diferida. Esto significa que estos componentes no se cargarán hasta que sean necesarios, es decir, cuando el usuario acceda a las rutas correspondientes.

Además, envolvemos nuestras rutas en el componente Suspense, el cual nos permite mostrar un componente de carga como un spinner mientras se carga el componente diferido.

Al utilizar la carga diferida en las rutas, podemos mejorar el rendimiento de nuestra aplicación React, ya que solo cargamos los componentes necesarios en el momento adecuado, evitando la carga innecesaria de recursos.

Recuerda que es importante evaluar el uso de la carga diferida en función de las necesidades específicas de tu aplicación y considerar factores como el tamaño de los componentes y la experiencia del usuario al cargarlos bajo demanda.