Введение в навигацию в NextJS

В данном разделе учебника мы поговорим о работе ссылок в NextJS.

Для начала давайте обсудим, что такого особенного в ссылках. Посмотрим на них в различных подходах к созданию сайта.

Сайт на React

Пусть у вас есть сайт на React. Как известно, React представлят собой SPA - сайт, в котором пользователь всегда остается на одной странице. Вы можете подключить React Router и пользователь будет думать, что ходит по разным страницам, при этом физически оставаясь на одном файле.

При этом пользователь будет кликать по ссылкам, ему будет казаться, что он попадает на другую страницу, но страница сайта в браузере не будет перезагружаться - React динамически будет формировать то, что пользователь видит на экране.

В такой схеме пользователь получает макет сайта при первом заходе на страницу, а затем части сайта просто меняются через JavaScript. При этом сайт может запрашивать данные с сервера через AJAX.

Такой подход снижает нагрузку на хостинг (ресурсы которого стоят наших денег), а также нагрузку на интернет-канал юзера.

Но у такого подхода есть минус - проблема с SEO. Вроде у сайта и есть набор ссылок, и в адресной строке что-то меняется, и можно даже скинуть ссылку на определенную страницу сайта через месседжер. Однако, содержимое страницы формируется динамически на клиенте и поисковики не способны такое обработать. Поэтому такой сайт продвигаться не будет.

Не все сайта, однако, предназначены для продвижения в поисковиках. И если ваш не предназначен, то данная схема вполне рабочая для вас.

Сайт на бэке

Пусть ваш сайт сделан на одном из языков бэка. Например, на PHP.

В этом случае, когда пользователь будет кликать по ссылкам, страница сайта будет каждый раз загружаться целиком.

Проблема в том, что существенная часть страницы уже есть у юзера. Ведь, как вы уже знаете, на странице обычно меняется только контент и метаданные, а все остальное остается неизменным.

Зачем же нам скачивать остальное, если поменялся только контент? Это создает повышенную нагрузку на сервер и интернет-канал.

Есть еще проблема. Пусть на странице, которую мы получаем, в контенте расположен список продуктов, как в интернет магазине. Очевидно, что каждый продукт имеет одинаковую верстку. Более оптимально было бы скачать только данные продуктов, и шаблон вывода продукта. И затем на клиенте вывести каждый продукт в этом шаблоне. Но мы скачиваем продукты вместе повторяющейся версткой продукта.

Резюмируя, если у нас сайт на чистом бэке, мы гоняем по сети много лишних данных.

Однако, в этом случае мы не имеем проблемы с SEO. По запрошенному URL всегда отдается статическое содержимое, понятное поисковикам.

Сайт на NextJS

NextJS комбинирует оба подхода. Когда пользователь вбивает URL прямо в адресную строку, то ему в ответ приходит статическое содержимое страницы.

Когда же пользователь начинает кликать по ссылкам на нашем сайте, то страница сайта не обновляется целиком, а через AJAX подгружается нужные юзеру данные.

Когда поисковик ходит по нашему сайту, он видит нужное ему статическое содержимое. А когда юзер ходит по нашему сайту, наш сайт начинает вести себя подобно SPA.

И, самое главное, NextJS проделывает все это автоматически! Нам не нужно заботиться об этом - он все сделает сам. Красота!

В следующих уроках мы будем разбираться, как NextJS заставить работать описанным образом.