Introduction to Navigation in NextJS

In this section of the tutorial, we will talk about how links work in NextJS.

First, let's discuss what is so special about links. Let's look at them in different approaches to website creation.

React Website

Suppose you have a website built with React. As you know, React is an SPA - a single-page application where the user always remains on one page. You can connect React Router and the user will think they are navigating to different pages, while physically remaining on a single file.

In this case, the user will click on links, it will seem to them that they are landing on another page, but the website page in the browser will not reload - React will dynamically form what the user sees on the screen.

In this scheme, the user receives the website layout upon first visiting the page, and then parts of the site simply change via JavaScript. Meanwhile, the site can request data from the server via AJAX.

This approach reduces the load on the hosting (whose resources cost us money), as well as the load on the user's internet channel.

But this approach has a downside - the SEO problem. It seems the website has a set of links, and the address bar changes, and you can even share a link to a specific page of the site via a messenger. However, the page content is formed dynamically on the client-side and search engines are not able to process this. Therefore, such a site will not be promoted.

However, not all websites are intended for promotion in search engines. And if yours is not, then this scheme is quite workable for you.

Backend Website

Suppose your website is built with one of the backend languages. For example, with PHP.

In this case, when the user clicks on links, the website page will be loaded in its entirety each time.

The problem is that a significant part of the page is already with the user. After all, as you already know, usually only the content and metadata change on the page, while everything else remains unchanged.

Why should we download the rest if only the content has changed? This creates an increased load on the server and the internet channel.

There is another problem. Suppose on the page we receive, the content contains a list of products, like in an online store. Obviously, each product has the same markup. It would be more optimal to download only the product data and the product display template. And then on the client-side, display each product in this template. But we are downloading the products along with the repeating product markup.

In summary, if we have a website on a pure backend, we are sending a lot of unnecessary data over the network.

However, in this case, we do not have an SEO problem. The requested URL always returns static content that is understandable to search engines.

NextJS Website

NextJS combines both approaches. When a user enters a URL directly into the address bar, they receive the static content of the page in response.

When the user starts clicking on links on our site, the website page does not refresh entirely; instead, the data needed by the user is loaded via AJAX.

When a search engine crawls our site, it sees the static content it needs. And when a user browses our site, our site starts behaving like an SPA.

And, most importantly, NextJS does all this automatically! We don't need to worry about it - it will do everything itself. Beautiful!

In the next lessons, we will figure out how to make NextJS work in the described manner.