Распространенной проблемой, когда вы начинаете изучать интерфейсную разработку, является понимание разницы между статическим сайтом, рендерингом на стороне клиента и рендерингом на стороне сервера. Помимо самого определения, всегда возникает вопрос, когда использовать одно вместо другого.

Идея этого поста состоит в том, чтобы немного объяснить каждый из них, помимо попытки объяснить сильные и слабые стороны каждого из них.

Статический сайт (HTML/CSS/JS)

Это простой чистый HTML + CSS + JS, и его можно написать самостоятельно или с помощью какого-либо статического генератора, такого как GatsbyJS.

Плюсы

  • Практически нулевое использование сервера, поскольку все уже отрендерено, и теперь единственная функция — обслуживать данные, что приводит к меньшим затратам для клиента.
  • Его можно обслуживать в CDN (лучше в кеше), что еще больше сокращает работу сервера, поскольку после сохранения файлов в CDN он будет отвечать за их доставку клиенту.
  • Лучшая производительность среди других, так как это не включает в себя какой-либо сложный процесс, а только загрузку файлов.
  • Гибкость использования на любом сервере. Поскольку мы говорим о чистом HTML, CSS и JavaScript, нам не нужно беспокоиться о том, работает ли на сервере Node, Ruby, Java или Python. Любой простой сервер сможет обслуживать приложение.

Минусы

  • Время сборки может быть очень большим, так как в процессе сборки необходимо сгенерировать все страницы сайта.
  • Сложность масштабирования больших приложений из-за большого количества файлов, которые необходимо создать.
  • Сложность создания постоянных обновлений, так как для каждого обновления требуется новая сборка.

Рендеринг на стороне клиента (одностраничное приложение — SPA)

Вместо того, чтобы обслуживать файлы HTML, CSS и JS по отдельности, в браузер пользователя будет отправлен файл JavaScript, который будет загружен, и только после этого будет выполняться вся связь с API и рендеринг контента со стороны пользователя. Примером этой модели является приложение Create React.

Плюсы

  • Разрешает страницы, богатые взаимодействиями, без перезагрузки.
  • Быстрый сайт после первоначальной загрузки, так как после загрузки JavaScript при первом доступе в браузере уже будет весь необходимый код, без необходимости загружать дополнительные файлы.
  • Отлично подходит для веб-приложений.

Минусы

  • Начальная загрузка может быть очень большой, в зависимости от размера проекта.
  • Непредсказуемая производительность. Если вам нужно отобразить слишком много вещей на экране пользователя, производительность может начать падать.
  • Трудности в SEO. Поскольку в SPA вам необходимо получить доступ к сайту и загрузить Javascript для отображения контента, возможно, поисковый робот Google не ждет, пока весь процесс не будет завершен, и может вызвать SEO-штрафы.
  • Большая часть контента не индексируется.

Рендеринг на стороне сервера (SSR)

В отличие от других, в Server Side Rendering весь контент рендерится на стороне сервера, а клиентский браузер уже получает всю страницу в готовом виде. Среди других инструментов одним из самых известных является Next.js.

Плюсы

  • Отлично подходит для SEO, так как все рендерится на стороне сервера, и при доступе к странице весь контент уже доступен.
  • Мета-теги с более подходящим превью.
  • Лучшая производительность для пользователя (контент будет просматриваться быстрее).
  • Код используется совместно с серверной частью в Node.
  • Меньше обработки на стороне пользователя.

Минусы

  • TTFB (время до первого байта) больше. Сервер подготовит весь контент перед доставкой контента.
  • Большой HTML, так как весь контент будет отправлен сразу.
  • Полная перезагрузка при изменении маршрута.

Quando usar cada um então?

В идеале следует использовать Создание статических сайтов, когда

  • Это простой сайт без особого взаимодействия с пользователем;
  • Нет частого обновления контента.
  • Сайт простой, без большого количества страниц.
  • Когда производительность чрезвычайно важна.

Примеры: целевая страница, блоги, портфолио.

Визуализация на стороне клиента следует использовать, когда:

  • Не нужно так много индексировать информацию в Google.
  • Когда пользователь делает много взаимодействий на странице и не хочет обновляться.
  • Когда информация будет разной для каждого пользователя.

Примеры: Twitter Web, Facebook Web, Spotify Web.

Наконец, рендеринг на стороне сервера следует использовать, когда:

  • Когда нужен SPA, но нужна более быстрая загрузка;
  • Когда контент часто меняется;
  • Когда мне нужна хорошая индексация в Google;

Примеры: Электронная торговля, новостной сайт.