Рендеринг — это процесс создания кода, необходимого для создания страницы, с которой конечные пользователи могут взаимодействовать через свой браузер. Это включает в себя подготовку контента, применение логики и обработку, а также включение любых элементов пользовательского интерфейса и других необходимых компонентов, необходимых для отображения конечной страницы. Приложения, управляемые контентом, ориентированы на высокую скорость загрузки, низкую задержку и быстрое время рендеринга.
Серверный рендеринг (SSR)
Рендеринг на стороне сервера (SSR) включает в себя рендеринг веб-страниц на сервере и последующую отправку полностью визуализированного HTML в браузер клиента, а не рендеринг их на стороне клиента с помощью JavaScript. Когда пользователи получают доступ к приложению, их браузер отправляет запрос на сервер. Приложение обрабатывает запрос на сервере, включая сбор данных из баз данных или внешних API, а затем отображает HTML для запрошенной страницы. Затем сервер отправляет полностью обработанный HTML-код страницы обратно в браузер пользователя. Когда браузер пользователя получает HTML, он загружает все необходимые файлы JavaScript.
Изучите HTML на сайте web.dev .
Преимущества использования SSR включают высокую начальную скорость загрузки, хорошую производительность поисковой оптимизации (SEO), надежность и общее удобство для пользователей. Однако реализовать SSR может быть сложнее, чем рендеринг на стороне клиента (CSR), из-за снижения производительности и навыков разработки, необходимых для создания и поддержки приложений с поддержкой SSR. SSR особенно полезен для веб-приложений, ориентированных на контент, платформ электронной коммерции и любых приложений, которым требуется хорошая производительность SEO и высокая начальная скорость ответа.
Генерация статического сайта (SSG)
Генерация статического сайта (SSG) генерирует статические HTML-файлы во время сборки и доставляет их пользователям без рендеринга на стороне сервера или клиента. Веб-контент создается, как правило, в структурированном формате, таком как Markdown, JSON или YAML, и включает в себя текст, изображения и другие ресурсы. Инструмент генератора статического сайта, такой как Hugo или Jekyll , обрабатывает контент и генерирует файлы HTML, CSS и JavaScript. Статический результат — это весь веб-сайт, и эти статические файлы развертываются на веб-сервере, CDN или в службе хостинга.
Узнайте больше о CSS и HTML на сайте web.dev.
Поскольку файлы статичны, их можно кэшировать и поэтому загружать очень быстро. SSG — хороший вариант для веб-приложений, которые не меняются часто или обновляются посредством периодических сборок сайта. Это неподходящий выбор для веб-приложений с динамической интерактивностью.
Клиентский рендеринг (CSR)
Рендеринг на стороне клиента (CSR) происходит в браузере клиента, а не на сервере. Веб-приложения часто загружаются с использованием минимальных шаблонов HTML, а затем содержимое динамически манипулируется с помощью JavaScript и данных с серверов или API. После запроса приложения сервер отправляет минимальный HTML-документ с базовой структурой и кодом JavaScript, необходимым для отображения страницы. Код JavaScript выполняется в браузере пользователя. Затем код обрабатывает полученные данные и генерирует контент, включая CSS, HTML и все интерактивные элементы. Затем код JavaScript реагирует на взаимодействие с пользователем, например на отправку формы.
Преимущества CSR включают быстрый переход между страницами и адаптивные интерфейсы. Веб-приложения на основе CSR часто имеют более медленное время начальной загрузки по сравнению с SSR и могут создавать проблемы с SEO. По мере роста приложений CSR их разработка и поддержка могут стать довольно сложными.