Рендеринг на стороне сервера (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
Маршрутизатор страниц Next.js с @lit-labs/nextjs
Nuxt 3 с nuxt-ssr-lit
...и другие интеграции в разработке!

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

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

Асинхронная работа компонентов не поддерживается. См. issue #2469.
Поддерживаются только компоненты Lit, использующие теневой DOM. См. issue #3080.
Декларативный теневой DOM пока реализован не во всех основных браузерах, однако доступен полифил. Подробнее об этом читайте в разделе использование на стороне клиента.
Также остаются открытыми вопросы, которые необходимо обсудить в отношении ElementRendererRegistry для взаимодействия с другими пользовательскими элементами.

Изменить эту страницу