Bienvenidos al post número cuatro de nuestro proyecto "Desarrollando un clon de Instagram en React".
En este post, implementaremos Lazy Loading en las distintas rutas, para que nuestra velocidad y optimización sea mucho mejor.
Además, implementaremos los links del navbarTop, para que vayan a las rutas que hemos definido anteriormente.
Vamos a ello!
Implementando Lazy Loading en nuestro proyecto
Para comenzar, empezaremos explicando que es Lazy Loading.
Llamamos Lazy Loading a la carga diferida.
Cuando abrimos un sitio web, en nuestro caso nuestra aplicación, el navegador carga todos los recursos necesarios para que nuestra aplicación se muestre adecuadamente. Normalmente, carga todas las páginas, las que vemos, y las que no, asi como sus componentes, imports etc.
Con Lazy Loading, lo que hacemos es que en lugar de cargar todo el contenido de la aplicación. Por medio de Lazy Loading solo se descarga el contenido visible en el área actual de la pantalla.
De este modo, si estamos en la ruta principal, llamaremos y cargaremos la pagina Home, con sus componentes correspondientes.
Con esto, lo que conseguimos, es no cargar las demás páginas, y solo cargarlas, cuando las llamemos.
En React, utilizamos Lazy y Suspense para realizar la carga perezosa (Lazy Loading).
Ahora que entendemos que es, y como funciona Lazy Loading, llego la hora de implementarlo en nuestro proyecto.
Para ello, vamos a ir a nuestro componente raíz, donde tenemos nuestras rutas, asi que vamos a App.jsx
Como primer paso, es importar lazy y Suspense, para ello, utilizaremos:
import { lazy, Suspense } from "react";
Ahora que tenemos importado Lazy y Suspense, utilizaremos lazy para importar nuestras páginas.
const Home = lazy(() => import("./pages/Home/Home"));
const Profile = lazy(() => import("./pages/Profile/Profile"));
const Search = lazy(() => import("./pages/Search/Search"));
Con esto, hemos importado las distintas páginas con Lazy.
Lo siguiente a utilizar es Suspense, pero, ¿Que es Suspense?
Suspense es un componente que importamos de React. Este componente captura cualquier promesa que sea lanzada en tiempo de render.
Nosotros lo utilizaremos para englobar nuestras rutas, de este modo, pasandole un fallback, podremos mostrar lo que queramos mientras el componente Lazy se esta cargando.
En el fallback, le hemos pasado la página Loading, es un loading con un componente Spinner en el centro.
Con esto, tendríamos nuestro lazy loading creado, y ¿como lo comprobamos? pues utilizaremos Inspeccionar Elemento de
Google Chrome.
Iremos a Fuentes y recargaremos la página vaciando el cache.
Como podemos comprobar, en la carpeta Pages se han cargado dos componentes, Home y Loading.
Loading se ha cargado mientras se carga la página Home.
Ahora, seguiremos con los links a las distintas rutas.
Implementando links en los Navs
El siguiente paso es implementar los links, utilizando react-router-dom es un poco distinto a un link normal, puesto que habrá que utilizar el componente Link de react-router-dom
Para ello, vamos a ir a NavbarBottom.jsx:
Importaremos el componente Link de react-router-dom de esta manera:
import { Link } from "react-router-dom";
Ya por último, será enblogbar nuestras imagenes del menú con nuestro componente Link
Al componente Link hay que pasarle una prop llamada to, en ella, hay que pasarle el nombre de la ruta a la que vamos a ir.
De este modo, nuestro componente quedaría así:
Con esto, ya tendríamos nuestro componente listo para ir a las distintas rutas.
Hemos terminado nuestro Lazy Loading, para la carga diferida de nuestra página, y ya hemos implementado nuestros Linkpara la redirección a nuestras rutas.
En el post número cinco, realizaremos el componente Stories
El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.
Top comments (0)