Lit SSR クライアントの使用

このパッケージは、Lit Labs の実験的パッケージファミリーの一部です。本番環境での Labs ソフトウェアの使用に関するガイダンスについては、Lit Labs のページを参照してください。

Lit SSR は、JavaScript なしでブラウザが解析および描画するための静的 HTML を生成します。（宣言的シャドウ DOM をサポートしていないブラウザでは、シャドウ DOM を利用するように作成された Lit コンポーネントに JavaScript ポリフィルが必要になります。）静的なコンテンツを含むページの場合、これだけで十分です。ただし、ページコンテンツが動的であり、ユーザーインタラクションに応答する必要がある場合は、JavaScript がそのリアクティビティを再適用する必要があります。

クライアント側でそのリアクティビティを再適用する方法は、スタンドアロンの Lit テンプレートをレンダリングしているか、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 コンポーネント

「Lit コンポーネント」へのパーマリンク

Lit コンポーネントにリアクティビティを再適用するには、カスタム要素の定義をロードしてアップグレードし、ライフサイクルコールバックを有効にして、コンポーネントのシャドウルート内のテンプレートをハイドレートする必要があります。

アップグレードは、カスタム要素を登録するコンポーネントモジュールをロードするだけで実現できます。これは、ページのすべてのコンポーネント定義のバンドルをロードすることで行うことも、必要に応じて定義のサブセットのみがロードされるより洗練されたヒューリスティックに基づいて行うこともできます。LitElement シャドウルート内のテンプレートがハイドレートされるようにするには、@lit-labs/ssr-client/lit-element-hydrate-support.js モジュールをロードします。これにより、宣言的シャドウ DOM でサーバーレンダリングされたことを検出すると、LitElement が自動的に自身をハイドレートするためのサポートがインストールされます。ハイドレーションサポートが適切にインストールされるように、このモジュールは、lit モジュール（lit をインポートするコンポーネントモジュールを含む）をロードする前にロードする必要があります。

Lit コンポーネントがサーバーレンダリングされると、そのシャドウルートの内容は、宣言的シャドウルートとしても知られる <template shadowroot> 内に出力されます。宣言的シャドウルートは、JavaScript を必要とせずに HTML が解析されると、その内容をテンプレートの親要素のシャドウルートに自動的にアタッチします。

すべてのブラウザが宣言的シャドウ DOM サポートを含むまで、ページにインライン化できる非常に小さなポリフィルを利用できます。これにより、JavaScript が有効になっているすべてのブラウザで今すぐ SSR を使用でき、他のブラウザに機能がロールアウトされるにつれて、JavaScript を使用しないユースケースに段階的に対応できます。template-shadowroot ポリフィルの使用法については、以下で説明します。

`@lit-labs/ssr-client/lit-element-hydrate-support.js` のロード

「@lit-labs/ssr-client/lit-element-hydrate-support.js のロード」へのパーマリンク

これは、コンポーネントモジュールと 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';

`template-shadowroot` ポリフィルの使用

「template-shadowroot ポリフィルの使用」へのパーマリンク

以下の HTML スニペットには、レイアウトシフトを防ぐために、ポリフィルがロードされるまで本文を非表示にするオプションの戦略が含まれています。

<!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 ポリフィルの両方のロードを組み合わせ、クライアント側でハイドレートする SSRed コンポーネントを持つページを提供する戦略を示しています。

Koa サーバーでの Lit SSR

このページを編集

前へ Lit SSR サーバーの使用次へ Lit SSR 用のコンポーネントの作成