Использование клиента Lit SSR

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

Способ повторного применения реактивности на стороне клиента зависит от того, используются ли отдельные шаблоны Lit или компоненты Lit.

«Гидратация» шаблонов Lit — это процесс, при котором Lit повторно связывает выражения шаблонов Lit с узлами, которые они должны обновлять в DOM, а также добавляет обработчики событий. Для гидратации шаблонов Lit в пакете @lit-labs/ssr-client предоставлен метод hydrate(). Прежде чем обновлять контейнер, отрисованный на сервере, с помощью render(), необходимо сначала вызвать для этого контейнера hydrate(), используя тот же шаблон и данные, что и при отрисовке на сервере:

import {render} from 'lit';
import {hydrate} from '@lit-labs/ssr-client';
import {myTemplate} from './my-template.js';
// Initial hydration required before render:
// (must be same data used to render on the server)
const initialData = getInitialAppData();
hydrate(myTemplate(initialData), document.body);

// After hydration, render will efficiently update the server-rendered DOM:
const update = (data) => render(myTemplate(data), document.body);

Чтобы повторно применить реактивность к компонентам Lit, необходимо загрузить определения пользовательских элементов, чтобы обновить их и активировать их обратные вызовы жизненного цикла, а также гидратировать шаблоны в теневых корнях компонентов.

Обновление можно выполнить, просто загрузив модуль компонента, в котором регистрируется пользовательский элемент. Это можно сделать, загрузив пакет со всеми определениями компонентов для страницы, либо применить более сложные эвристики, загружая только необходимое подмножество определений по мере необходимости. Чтобы шаблоны в теневых корнях LitElement были гидратированы, загрузите модуль @lit-labs/ssr-client/lit-element-hydrate-support.js, который устанавливает поддержку LitElement для автоматической гидратации при обнаружении того, что элемент был отрисован на сервере с помощью декларативного теневого DOM. Этот модуль необходимо загрузить до модуля lit (включая любые модули компонентов, которые импортируют lit), чтобы обеспечить правильную установку поддержки гидратации.

При серверной отрисовке компонентов Lit содержимое их теневых корней выводится внутри <template shadowroot>, также известного как декларативный теневой корень. При разборе HTML декларативные теневые корни автоматически присоединяют своё содержимое к теневому корню родительского элемента шаблона без необходимости в JavaScript.

Пока поддержка декларативного теневого DOM не появится во всех браузерах, доступен очень небольшой полифилл, который можно встроить в страницу. Это позволяет уже сейчас использовать SSR в любых браузерах с включённым JavaScript и постепенно учитывать сценарии без JavaScript по мере внедрения этой функции в других браузерах. Использование полифилла template-shadowroot описано ниже.

Этот модуль необходимо загрузить до любых модулей компонентов и библиотеки lit.

Например:

  <body>
    <!-- App components rendered with declarative shadow DOM placed here. -->

    <!-- ssr-client lit-element-hydrate-support should be loaded first. -->
    <script type="module" src="/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js"></script>

    <!-- As component definition loads, your pre-rendered components will
        come to life and become interactive. -->
    <script src="/app-components.js"></script>
  </body>

Если вы собираете свой код в пакет, убедитесь, что @lit-labs/ssr-client/lit-element-hydrate-support.js импортируется первым:

// index.js
import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
import './app-components.js';

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

<!DOCTYPE html>
<html>
  <head>
    <!-- On browsers that don't yet support native declarative shadow DOM, a
        paint can occur after some or all pre-rendered HTML has been parsed,
        but before the declarative shadow DOM polyfill has taken effect. This
        paint is undesirable because it won't include any component shadow DOM.
        To prevent layout shifts that can result from this render, we use a
        "dsd-pending" attribute to ensure we only paint after we know
        shadow DOM is active. -->
    <style>
      body[dsd-pending] {
        display: none;
      }
    </style>
  </head>

  <body dsd-pending>
    <script>
      if (HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
        // This browser has native declarative shadow DOM support, so we can
        // allow painting immediately.
        document.body.removeAttribute('dsd-pending');
      }
    </script>

    <!-- App components rendered with declarative shadow DOM placed here. -->

    <!-- Use a type=module script so that we can use dynamic module imports.
        Note this pattern will not work in IE11. -->
    <script type="module">
      // Check if we require the template shadow root polyfill.
      if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
        // Fetch the template shadow root polyfill.
        const {hydrateShadowRoots} = await import(
          '/node_modules/@webcomponents/template-shadowroot/template-shadowroot.js'
        );

        // Apply the polyfill. This is a one-shot operation, so it is important
        // it happens after all HTML has been parsed.
        hydrateShadowRoots(document.body);

        // At this point, browsers without native declarative shadow DOM
        // support can paint the initial state of your components!
        document.body.removeAttribute('dsd-pending');
      }
    </script>
  </body>
</html>

В этом примере показана стратегия, объединяющая загрузку @lit-labs/ssr-client/lit-element-hydrate-support.js и полифилла template-shadowroot и позволяющая отдать страницу с компонентом, отрисованным с помощью SSR, для гидратации на стороне клиента.

Lit SSR на сервере Koa

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