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

Рендеринг на стороне сервера (SSR) — это метод генерации и выдачи HTML-кода ваших компонентов, включая теневой DOM и стили, до загрузки и выполнения их реализаций на JavaScript.

SSR можно использовать по разным причинам:

Производительность. Некоторые сайты отображаются быстрее, если сначала выводят статический HTML, не дожидаясь загрузки JavaScript, а затем (при необходимости) загружают JavaScript страницы и гидратируют компоненты.
SEO и поисковые роботы. Хотя основные поисковые роботы отображают страницы в браузерах с полной поддержкой JavaScript, не все поисковые роботы поддерживают JavaScript.
Надёжность. Статический HTML отображается, даже если JavaScript не удаётся загрузить или у пользователя отключён JavaScript.

Подробнее о концепциях и методах рендеринга на стороне сервера в целом см. в статье Рендеринг в Интернете на web.dev.

Lit поддерживает рендеринг на стороне сервера с помощью пакета Lit SSR. Lit SSR преобразует компоненты и шаблоны Lit в статическую HTML-разметку в средах JavaScript, не являющихся браузерами, например в Node. Для этого не требуется полностью эмулировать DOM браузера; пакет использует декларативный формат шаблонов Lit, обеспечивая высокую производительность, малое время до первого байта и поддержку потоковой передачи.

Lit SSR — это низкоуровневая библиотека, которую можно напрямую использовать на сервере или в генераторе сайтов на базе Node. Посмотрите пример использования Lit SSR на сервере Koa.

Также опубликован ряд интеграций, которые позволяют использовать Lit SSR без дополнительной настройки:

Плагин Lit для Eleventy
Интеграция Lit с Astro
Rocket
...и другие, находящиеся в разработке!

Состояние библиотеки

Библиотека активно разрабатывается; у неё есть несколько важных ограничений, которые мы надеемся устранить:

Асинхронная работа компонентов не поддерживается. См. задачи #3219, #2469.
Поддерживаются только компоненты Lit, использующие теневой DOM. См. задачу #3080.
Ведётся работа над интеграцией с другими SSR-фреймворками. См. задачи для NextJS и Nuxt.
Декларативный теневой DOM пока реализован не во всех основных браузерах, однако для него доступен полифил. Подробнее об этом см. в разделе использование на клиенте.
Кроме того, остаются открытыми вопросы, которые необходимо обсудить, касающиеся ElementRendererRegistry для взаимодействия с другими пользовательскими элементами.

Редактировать эту страницу