Просмотрите источник, чтобы подтвердить, что SSR работает в Next.js

Как проверить, работает ли SSR в вашем приложении Next.js

Вы настроили новое приложение Next.js? Большой!

Давайте теперь проверим, работает ли приложение так, как мы ожидаем. Это приложение Next.js, поэтому оно должно бытьрендеринг на стороне сервера.

Это один из главных преимуществ Next.js: если мы создаем сайт с помощью Next.js, страницы сайта отображаются на сервере, который доставляет HTML в браузер.

У этого есть 3 основных преимущества:

  • Клиенту не нужно создавать экземпляр React для рендеринга, что делает сайт более быстрым для ваших пользователей.
  • Поисковые системы будут индексировать страницы без необходимости запуска клиентского JavaScript. Google начал что-то делать, но открыто признал, что это медленный процесс (и вы должны как можно больше помогать Google, если хотите хорошо ранжироваться.
  • У вас могут быть метатеги социальных сетей, полезные для добавления изображений для предварительного просмотра, настройки заголовка и описания для любой из ваших страниц, опубликованных в Facebook, Twitter и т. Д.

Давайте посмотрим на источник приложения. Используя Chrome, вы можете щелкнуть правой кнопкой мыши в любом месте страницы и нажатьПросмотреть исходный код страницы.

Если вы просмотрите источник страницы, вы увидите<div><h1>Airbnb clone</h1></div>фрагмент в HTMLbodyвместе с кучей файлов JavaScript - пакетами приложений.

Нам не нужно ничего настраивать, SSR (рендеринг на стороне сервера) у нас уже работает.

Приложение React будет запущено на клиенте и будет обеспечивать такие взаимодействия, как нажатие на ссылку, с использованием рендеринга на стороне клиента. Но перезагрузка страницы перезагрузит ее с сервера. А при использовании Next.js не должно быть разницы в результатах внутри браузера - страница, отображаемая на сервере, должна выглядеть точно так же, как страница, отображаемая клиентом.

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: