К нам часто приходят от других разработчиков. Когда начинаем разбираться, понимаем: заказчику предлагали совершенно ненужные фичи. Эти самые фичи не только растягивают проект по времени, но и повышают его стоимость, а ощутимой пользы не приносят. Пример — рендеринг на сервере в браузере или на стороне клиента. Что это такое?
Рендеринг — это преобразование кода в визуализированную страницу. Самые распространённые типы — на сервере (server side rendering, или SSR) и в браузере клиента (client side rendering, или CSR). В последнее время мы чаще используем серверный рендеринг с помощью технологии HTMX и советуем его заказчикам. В статье расскажем, почему.
Мы не отказались от React или Vue. js полностью, просто применяем его именно там, где эти технологии действительно требуются.
Чем рендеринг на сервере отличается от рендеринга на стороне клиента
При серверном рендеринге преобразование кода в готовую страницу происходит на сервере сайта. Когда пользователь переходит на сайт, сервер получает запрос. Он обращается к базе данных сайта, обрабатывает данные и передаёт в браузер пользователя HTML-файл.
Клиентский рендеринг — более новый способ, который использует JavaScript. Данные преобразуются не на сервере, а прямо в браузере. Сервер передаёт в браузер не готовый к отображению HTML-файл, а лишь его каркас. Вместе с ним передаются файлы JavaScript: они содержат информацию о том, что именно должен увидеть пользователь. Сначала браузер загружает HTML, а потом в файл встраиваются данные из JavaScript — как только данные загружены, пользователь видит страницу и может с ней взаимодействовать.
Более подробно узнать, как устроены оба типа отрисовки, можно в этой статье. А мы расскажем о преимуществах рендеринга на сервере с нашей точки зрения.
Первый плюс SSR — скорость разработки
Серверный рендеринг — маст-хэв для бизнесов, которые хотят запуститься быстро. Секрет высокой скорости — более простой код и меньшее количество багов.
С клиентским рендерингом работать сложнее: кода больше. Чтобы хоть как-то ускорить процесс, разработчики используют ресурсозатратные библиотеки или фреймворки, самые популярные из которых — React и Vue. Вычисления происходят не только на сервере, но ещё и в браузере клиента. Усложнённая логика влечёт за собой ошибки, вызванные, в том числе, использованием JavaScipt. На исправление ошибок уходят драгоценные часы.
Мы уже рассказывали историю о том, как выбрали CSR — а потом утонули в багах: файлы оказались слишком тяжёлыми для видеокарт клиента. Мы с нуля переписывали приложение на SSR за свой счёт, а заказчик потерял время.
Ещё нужно помнить, что некоторые пользователи отключают JavaScript в настройках браузера — в этом случае сайт может вообще не загрузиться. При серверном рендеринге мы не зависим от JavaScript: даже если пользователь его отключил, страница всё равно отобразится корректно.
Второй плюс SSR — экономия денег
Одна из причин, по которой агентства предлагают заказчикам CSR, — высокий чек. Хотя стоимость часа работы при серверном и клиентском рендерингах примерно одинакова, SSR выигрывает за счёт меньшего количества часов. Это влияет на стоимость не только разработки, но и запуска стартапов в целом.
Например, мы делаем зоосправочник ZooBiZoo. Разработка такого сервиса в месяц с применением серверного рендеринга стоила около 700 тысяч рублей. Если бы использовали клиентский рендеринг — вышло бы в районе 800–900 тысяч. Кажется, разница небольшая. Но если посчитать затраты на развитие проекта, экономия может достигать до 1 млн рублей в год. Эти деньги можно спокойно вложить в рекламу.
Когда клиентский рендеринг уместен, а когда — вообще нет
Всё же бывают случаи, когда CSR нужен. Мы советуем его там, где важны интерактивность и моментальный отклик: в графических и текстовых редакторах типа Canva или Google Docs, проектах гемблинг-индустрии, стриминговых сервисах. SSR прост и удобен — но не создан для того, чтобы «делать красиво». С ним невозможно воплотить задумку со сложной анимацией, которая воспроизводится мгновенно при открытии страницы.
Да, есть индустрии, где рендеринг на сервере проигрывает. Но большинство проектов способны обойтись без наворотов JavaScipt. Мы считаем, что банки и социальные сети частично могут переехать на SSR, хотя сейчас используют чаще клиентский рендеринг.
В целом, рендеринг на сервере — идеальный вариант для проектов со статичным контентом. Как правило, на подобных сайтах возможности React и Vue не используют на полную мощность. Получается, заказчик переплачивает за CSR там, где можно сэкономить.
У нас нет цели взять как можно больше денег — и ради этого посадить дорогостоящих специалистов отрабатывать часы. Поэтому, если можно решить ваши задачи с помощью более простого рендеринга на сервере, мы применяем именно его.