Рендеринг на клиенте, на сервере и генерация статических сайтов

Приветствую всех профессионалов и любителей сайтостроения! Предлагаю вашему вниманию перевод статьи "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 предлагает то, что в рамках фреймворка называется автоматической статической оптимизацией для тех страниц, которые он определяет как статические. Это позволяет создавать гибридные приложения, содержащие как страницы, рендерящиеся на сервере, так и сгенерированную статику.

    Обсудить проект
    Заполните форму и мы с Вами свяжемся