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

Lit SSR генерирует статический HTML, который браузер может разобрать и отобразить без JavaScript. (Для браузеров, не поддерживающих декларативный Shadow DOM, потребуется полифил на JavaScript для компонентов Lit, созданных с использованием Shadow 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 для автоматической гидратации при обнаружении того, что компонент был отрисован на сервере с декларативным Shadow DOM. Этот модуль необходимо загрузить до модуля lit (включая любые модули компонентов, импортирующие lit), чтобы поддержка гидратации была установлена должным образом.

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

Пока все браузеры не получат поддержку декларативного Shadow 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 и передает страницу с компонентом, отрисованным на сервере, для гидратации на стороне клиента.

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

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