Приветствую всех профессионалов и любителей сайтостроения! Предлагаю вашему вниманию перевод статьи "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-приложение.
Преимущества рендеринга на клиенте
- Приложения легко разрабатывать и хостить
Вам не нужен сервер для приложений, рендерящихся на стороне клиента. Можно просто разместить свое приложение на любой CDN или файловом хостинге вроде Амазон. Есть множество бесплатных способов размещения. - Не нужно полностью перезагружать страницы
Пользователи могут переходить по страницам без серии обращений к серверу. Из-за этого создаётся ощущение высокой скорости работы, почти как у нативного приложения.
Недостатки рендеринга на клиенте
- Проблемы с SEO
Приложения с рендерингом на клиенте часто сложно продвигать в поисковиках. Хотя Google заявляют, что индексируют сайты, рендерящиеся с помощью JS, они ранжируют эти сайты очень низко. Если ваш сайт загружается слишком долго, он может быть проиндексирован как пустая страница. - Плохой UX на медленных устройствах
На медленных ноутбуках и мобильных устройствах рендеринг на клиенте может замедлить загрузку на несколько секунд. Это может раздражать пользователей, и в результате они покинут страницу не дождавшись окончания загрузки. - Долгая загрузка
Приложения с рендерингом на стороне клиента выполняют дополнительный запрос к серверу с API для рендеринга. Соответственно, ваш сайт будет загружаться дольше, чем аналогичное статичное приложение или приложение с рендерингом на стороне сервера.
Рендеринг на стороне сервера
Приложения с серверным рендерингом отдают готовые к рендеру HTML страницы. Такие приложения заранее выполняют все необходимые вызовы API и передают все необходимые данные в изначальном запросе. Это значит, что браузер сразу же получает все, что нужно для рендеринга приложения, что сокращает время до первого взаимодействия с пользователем.
Серверный рендеринг — это классический метод создания сайтов. Традиционным недостатком этого метода была необходимость выполнять серию запросов к серверу по мере навигации пользователя по сайту. Однако с помощью таких инструментов, как NextJS, мы можем создавать приложения, сочетающие в себе лучшие стороны генерации на сервере и на клиенте. Способ заключается в том, чтобы осуществить первую загрузку после рендеринга на стороне сервера, а маршрутизацию на стороне клиента.
Преимущества рендеринга на стороне сервера
- Ускоренная загрузка
Приложения с рендерингом на стороне сервера, загружаются быстрее, чем похожие приложения, которые рендерятся на клиенте. А поскольку сервер выполняет наиболее затратную часть работы, они также быстро загружаются на менее производительных устройствах. - Намного лучшее SEO.
Преимущества рендеринга на стороне сервера для SEO хорошо документированы. Google награждает сайты, которые загружаются быстрее, более высоким рейтингом страниц. У Google и других поисковых роботов не возникнет проблем с индексированием ваших веб-сайтов, отображаемых на стороне сервера.
Недостатки рендеринга на стороне сервера
- Дорого хостить
По сравнению с приложениями, которые рендерятся на стороне клиента, хостинг приложений с серверным рендерингом стоит дороже. В результате каждого запроса к вашему серверу он должен будет выполнять вызовы API, а затем рендерить HTML перед его передачей на сторону клиента. - Более сложная разработка
Самостоятельная настройка рендеринга на стороне сервера с использованием React может оказаться непростой задачей. Однако это становится намного проще, если использовать один из предназначенных для этого фреймворков, например NextJS.
Генерация статических сайтов
Генераторы статических сайтов работают, генерируя все HTML-файлы для сайта во время сборки. Сервер заранее выполняет вызовы API и генерирует статические HTML-файлы для каждой страницы вашего сайта. Это значит, что когда клиент запрашивает одну из веб-страниц, серверу не нужно обращаться к API или рендерить HTML, ему нужно только вернуть предварительно подготовленную HTML-страницу.
Допустим, вы создаете блог и написали десять постов. Во время сборки вашего статического сайта он сгенерирует HTML-файл для каждого сообщения в блоге. Когда вы напишете еще один пост, вам нужно пересобрать приложение и задеплоить обновленную статику.
Gatsby и NextJS — два наиболее известных генератора статических сайтов, основанных на React. Hugo — еще один пример чрезвычайно популярного генератора статических сайтов.
Преимущества создания статических сайтов
- Быстрая загрузка
Поскольку HTML-файлы уже скомпилированы и готовы к использованию, статические сайты загружаются быстрее, чем сайты, с рендерингом на стороне клиента, и сайты с рендерингом на сервере. Вы можете (Примечание переводчика: в оригинальной статье предложение внезапно обрывается). - Дешевый хостинг
Поскольку ваш сайт просто состоит из множества HTML-файлов, вы можете использовать CDN или разместить свой сайт на любом файловом хостинга.
Недостатки создания статических сайтов
- Некоторые сложности с масштабированием
По мере роста вашего сайта будет также увеличиваться время сборки статики. Это может привести к тому, что процесс сборки сайтов с большим количеством постов будет крайне медленным. Статические сайты лучше всего подходят для случаев, когда есть данные, которые не так часто меняются, например для блогов. Они меньше подходят для сайтов с постоянно меняющимися данными, например для магазинов.
Лучшее из обоих миров — NextJS
На мой взгляд, NextJS предлагает комбинирует лучшее из обоих подходов, позволяя нам создавать гибридные приложения, которые используют как рендеринг на стороне сервера, так и создание статических сайтов. NextJS предлагает то, что в рамках фреймворка называется автоматической статической оптимизацией для тех страниц, которые он определяет как статические. Это позволяет создавать гибридные приложения, содержащие как страницы, рендерящиеся на сервере, так и сгенерированную статику.
