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

create-react-app 🎨

Точнее react-scripts, это набор инструментов для вашего приложения React. Он поставляется с собственным сервером разработки и конфигурацией сборки. Эта сборка будет генерировать статические файлы для рендеринга на стороне клиента; но он не поддерживает рендеринг на стороне сервера, и это не то же самое, что рендеринг Gatsby.

После запуска команды react-scripts build вы окажетесь в только что созданном каталоге build в папке вашего проекта. Каталог build содержит минимальный HTML и JS, который говорит браузеру, как построить остальную часть DOM. Если вы используете react-router, эта конструкция DOM будет учитывать URL в браузере. Все URL выводят один и тот же пакет HTML и JS.

if (url === PAGE1) {
  buildPage1Dom();
} else if (url === PAGE2) {
  buildPage2Dom();
} else {
  // ...
}

Независимо от того, какой URL вы отправляете на сервер, вы получаете один и тот же пакет HTML и JS.

Рендеринг на стороне сервера 💻

Рендеринг на стороне сервера (часто сокращенно SSR ) принимает запрошенный URL-адрес, отправленный на сервер, создает HTML-код на сервере, а затем отправляет вам завершенный HTML-код и пакет JS. Пакет JS позволит вам создавать другие страницы без повторного запроса с сервера.

if (newUrl === PAGE1) {
  buildPage1Dom();
} else if (newUrl === PAGE2) {
  buildPage2Dom();
} else {
  // ...
}

Это то же поведение, которое вы видели с каталогом build. Отличие от рендеринга на стороне сервера заключается в том, что HTML - код, с которого вы начали, не является пустым холстом. buildPageDOM() уже выполнено, DOM уже заполнен, и полученный вами HTML уже содержит все элементы. Если ваш сервер может генерировать DOM быстрее, чем ваш клиент (что обычно возможно, особенно при кэшировании), это может повысить производительность ваших пользователей. Часто более важно, что это может повысить рейтинг вашей поисковой системы, поскольку поисковая система также не обязана создавать DOM вашей страницы и может сразу же искать ключевые слова, связанные с вашей веб-страницей.

Gatsby 🥚

Gatsby является инструментом React, который использует «на стороне сервера» рендеринг для предварительного создания каждой страницы. Когда ваши клиенты запрашивают страницу, ваш сервер не нуждается в ее создании - она ​​уже создана. Клиент просто получает статический файл, который был сгенерирован всякий раз, когда вы изменяли свой Gatsby проект. Этот статический файл должен быть идентичен тому, что рендерилось бы на стороне сервера бы генерации на лету. Для большинства проектов Gatsby будет работать быстрее, поскольку HTML-код для каждой из ваших страниц уже создан.

В некоторых случаях вы не захотите, чтобы это происходило, поскольку HTML-код может меняться в зависимости от запроса. Это может произойти на таких страницах, как «Моя учетная запись», где содержимое зависит от пользователя, или результаты поиска, которые необходимо быстро обновить. Во многих таких случаях лучшим вариантом будет рендеринг на стороне сервера.