Рендеринг на клиенте, на сервере и генерация статических сайтов
- суббота, 7 ноября 2020 г. в 00:33:22
Приветствую всех профессионалов и любителей сайтостроения! Предлагаю вашему вниманию перевод статьи "Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation" от Malcolm Laing.
Фронтендеры часто используют эти термины для описания своих приложений. Однако людей, хуже знакомых с веб-технологиямм, эти понятия часто вводят в заблуждение. Если вам сложно понять различия между рендерингом на стороне клиенте, рендерингом на стороне сервера и генерацией статических сайтов — эта статья для вас!
Рендеринг на клиенте стал популярен с расцветом технологии Single Page Application (Spa). Этот подход применяется во многих JavaScript фреймворках, например AngularJS, ReactJS, Backbone.JS и др. В приложениях с генерацией на клиенте сервер отправляет JS файлы и статичный HTML на сторону клиента. Затем клиент выполняет вызовы API в количестве, достаточном для того, чтобы получить исходные данные, и уже после этого приложение рендерится.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>Как видно на примере выше, отданный сервером статичный HTML — это пустая страница. Если открыть этот HTML с отключенным JS, результатом будет пустой экран с ворнингом, записанным в теге noscript. Когда клиент получает HTML и подгружает JS, в div с ID root отрендерится React-приложение.
Приложения с серверным рендерингом отдают готовые к рендеру HTML страницы. Такие приложения заранее выполняют все необходимые вызовы API и передают все необходимые данные в изначальном запросе. Это значит, что браузер сразу же получает все, что нужно для рендеринга приложения, что сокращает время до первого взаимодействия с пользователем.
Серверный рендеринг — это классический метод создания сайтов. Традиционным недостатком этого метода была необходимость выполнять серию запросов к серверу по мере навигации пользователя по сайту. Однако с помощью таких инструментов, как NextJS, мы можем создавать приложения, сочетающие в себе лучшие стороны генерации на сервере и на клиенте. Способ заключается в том, чтобы осуществить первую загрузку после рендеринга на стороне сервера, а маршрутизацию на стороне клиента.
Генераторы статических сайтов работают, генерируя все HTML-файлы для сайта во время сборки. Сервер заранее выполняет вызовы API и генерирует статические HTML-файлы для каждой страницы вашего сайта. Это значит, что когда клиент запрашивает одну из веб-страниц, серверу не нужно обращаться к API или рендерить HTML, ему нужно только вернуть предварительно подготовленную HTML-страницу.
Допустим, вы создаете блог и написали десять постов. Во время сборки вашего статического сайта он сгенерирует HTML-файл для каждого сообщения в блоге. Когда вы напишете еще один пост, вам нужно пересобрать приложение и задеплоить обновленную статику.
Gatsby и NextJS — два наиболее известных генератора статических сайтов, основанных на React. Hugo — еще один пример чрезвычайно популярного генератора статических сайтов.
На мой взгляд, NextJS предлагает комбинирует лучшее из обоих подходов, позволяя нам создавать гибридные приложения, которые используют как рендеринг на стороне сервера, так и создание статических сайтов. NextJS предлагает то, что в рамках фреймворка называется автоматической статической оптимизацией для тех страниц, которые он определяет как статические. Это позволяет создавать гибридные приложения, содержащие как страницы, рендерящиеся на сервере, так и сгенерированную статику.