Просмотрите источник, чтобы подтвердить, что 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
• Next.js против Gatsby против приложения create-react-app
• Как установить Next.js
• Связывание двух страниц в Next.js с помощью Link
• Динамический контент в Next.js с роутером
• Передача данных в компонент Next.js с помощью getInitialProps
• Стилизация компонентов Next.js с помощью CSS
• Предварительная загрузка содержимого в Next.js
• Использование роутера для обнаружения активной ссылки в Next.js
• Просмотрите источник, чтобы подтвердить, что SSR работает в Next.js
• Next.js: заполните тег заголовка настраиваемыми тегами
• Развертывание приложения Next.js прямо сейчас
• Next.js: запускать код только на стороне сервера или на стороне клиента в Next.js
• Развертывание приложения Next.js в рабочей среде
• Как анализировать пакеты приложений Next.js
• Ленивая загрузка модулей в Next.js
• Добавление компонента-оболочки в приложение Next.js
• Значки, добавленные Next.js в ваше приложение
• Пакеты приложений Next.js
• Как использовать маршрутизатор Next.js
• Как использовать маршруты API Next.js
• Как получить файлы cookie на стороне сервера в приложении Next.js
• Как изменить порт приложения Next.js