Desarrollando un clon de instagram en React IV - Implementando Lazy Loading y Links en los Navs
Tags: javascript, clon, instagram, react
Published: 2023-02-25 12:54:17

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``

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8rd5an6koqi90pj9gqr.png)

Como primer paso, es importar lazy y Suspense, para ello, utilizaremos:

```javascript
import { lazy, Suspense } from "react";
```

Ahora que tenemos importado Lazy y Suspense, utilizaremos lazy para importar nuestras páginas.

```javascript
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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yu6aueqed914liwqlr2r.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tm22np4p0eoci6d7smq.png)

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:

```javascript
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í:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0x99xuygej1mketszb3.png)

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 ``Link``para 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.

[Repositorio clone-instagram-react
](https://github.com/robertomsen/clone-instagram-react)