Introducción a la Navegación en NextJS
En esta sección del tutorial hablaremos sobre el funcionamiento de los enlaces en NextJS.
Para empezar, discutamos qué tiene de especial los enlaces. Miremos a ellos en los distintos enfoques para crear un sitio web.
Sitio en React
Supongamos que tienes un sitio en React. Como es sabido, React representa un SPA - un sitio, en el cual el usuario siempre permanece en una misma página. Puedes conectar React Router y el usuario pensará que navega por diferentes páginas, mientras que físicamente permanece en un mismo archivo.
Mientras tanto, el usuario hará clic en los enlaces, le parecerá que llega a otra página, pero la página del sitio en el navegador no se recargará - React formará dinámicamente lo que el usuario ve en la pantalla.
En este esquema el usuario obtiene el diseño del sitio al entrar por primera vez a la página, y luego las partes del sitio simplemente cambian a través de JavaScript. Mientras tanto, el sitio puede solicitar datos del servidor vía AJAX.
Este enfoque reduce la carga en el hosting (cuyos recursos cuestan nuestro dinero), y también la carga en el canal de internet del usuario.
Pero este enfoque tiene una desventaja: el problema con el SEO. Parece que el sitio tiene un conjunto de enlaces, y en la barra de direcciones algo cambia, e incluso se puede enviar un enlace a una página específica del sitio a través de un mensajero. Sin embargo, el contenido de la página se forma dinámicamente en el cliente y los motores de búsqueda no son capaces de procesarlo. Por lo tanto, tal sitio no se podrá posicionar.
No todos los sitios, sin embargo, están destinados a posicionarse en los buscadores. Y si el tuyo no lo está, entonces este esquema es bastante funcional para ti.
Sitio en backend
Supongamos que tu sitio está hecho en uno de los lenguajes de backend. Por ejemplo, en PHP.
En este caso, cuando el usuario haga clic en los enlaces, la página del sitio se cargará completamente cada vez.
El problema es que una parte sustancial de la página ya la tiene el usuario. Porque, como ya sabes, en la página normalmente solo cambia el contenido y los metadatos, y todo lo demás permanece sin cambios.
¿Por qué vamos a descargar lo demás, si solo ha cambiado el contenido? Esto crea una carga elevada en el servidor y el canal de internet.
Hay otro problema. Supongamos que en la página, que obtenemos, en el contenido se encuentra una lista de productos, como en una tienda online. Obviamente, cada producto tiene la misma maquetación. Sería más óptimo descargar solo los datos de los productos, y la plantilla de visualización del producto. Y luego en el cliente mostrar cada producto en esta plantilla. Pero nosotros descargamos los productos junto con la maquetación repetitiva del producto.
En resumen, si tenemos un sitio en backend puro, enviamos por la red muchos datos innecesarios.
Sin embargo, en este caso no tenemos el problema con el SEO. Por la URL solicitada siempre se devuelve un contenido estático, comprensible para los motores de búsqueda.
Sitio en NextJS
NextJS combina ambos enfoques. Cuando el usuario introduce una URL directamente en la barra de direcciones, entonces en respuesta recibe el contenido estático de la página.
Cuando el usuario comienza a hacer clic en los enlaces de nuestro sitio, la página del sitio no se actualiza por completo, sino que a través de AJAX se cargan los datos que el usuario necesita.
Cuando el motor de búsqueda recorre nuestro sitio, ve el contenido estático que necesita. Y cuando el usuario navega por nuestro sitio, nuestro sitio comienza a comportarse como un SPA.
Y, lo más importante, NextJS realiza todo esto automáticamente. No necesitamos preocuparnos por ello - él lo hará todo solo. ¡Qué belleza!
En las siguientes lecciones analizaremos cómo hacer que NextJS funcione de la forma descrita.
