Eleventy + Lit

Litコンポーネントの静的レンダリングのための新しいLit Labs Eleventyプラグインを発表

2022年2月7日

Al Marks

Litチームは、@lit-labs/eleventy-plugin-litの試験的なプレビューリリースを発表できることを嬉しく思います。これは、Eleventy用の新しいプラグインで、Eleventyビルド中にLitコンポーネントを静的HTMLとしてレンダリングし、JavaScriptの読み込み後にハイドレーションすることができます。

今すぐGitHubとNPMで確認するか、読み進めてその機能、使用する理由、仕組みについて詳しく学んでください。

機能

Eleventy設定に@lit-labs/eleventy-plugin-litを追加すると、MarkdownまたはHTMLファイルにカスタム要素タグを記述するたびに、そのコンポーネントのシャドウDOMとスタイルの初期状態が静的HTMLに直接レンダリングされます。

たとえば、Markdownファイルhello.mdがあるとします

# Greetings

<demo-greeter name="World"></demo-greeter>

そして、コンポーネント定義js/demo-greeter.js

import {LitElement, html, css} from 'lit';

class DemoGreeter extends LitElement {
  static styles = css`
    b { color: red; }
  `;

  static properties = {
    name: {},
  };

  render() {
    return html`Hello <b>${this.name}</b>!`;
  }
}
customElements.define('demo-greeter', DemoGreeter);

Eleventyは、次のようなHTMLファイルhello/index.htmlを生成します

<h1>Greetings</h1>

<demo-greeter name="World">
  <template shadowroot="open">
    <style>
      b { color: red; }
    </style>
    Hello <b>World</b>!
  </template>
</demo-greeter>

このHTMLにより、ブラウザはJavaScriptが1行もダウンロードされる前に、Webコンポーネントのすべてのカプセル化境界を維持しながら、コンポーネントのDOMとスタイルの初期状態を描画できます。

その後、<demo-greeter>のJavaScript定義が最終的に読み込まれると、静的にレンダリングされたコンポーネントは、*ハイドレーション*と呼ばれるプロセスを通じて、完全にインタラクティブなJavaScript実装にアップグレードされます。

使用する理由

コンポーネントを静的にレンダリングすることは、ページの読み込み開始からコンテンツが表示されるまでの時間を短縮するための効果的な方法です。これは、特に接続速度やデバイスが遅いユーザーにとって、サイトの応答性に寄与する重要な考慮事項です。

コンポーネントの初期状態を静的HTMLとして送信することにより、ブラウザは、それらのコンポーネントのJavaScript実装をダウンロード、解析、および評価するよりもはるかに高速に初期ビューを描画できます。

静的レンダリングの利点の詳細については、*Webでのレンダリング*を参照してください。また、Webパフォーマンスのこの側面を測定する方法については、*Largest Contentful Paint (LCP)*を参照してください。

仕組み

Lit Labs SSR

このプラグインは、内部で@lit-labs/ssrを使用します。これは、Eleventy Nodeプロセス内の軽量のブラウザのような環境で各コンポーネントのインスタンスを作成し、Litのrender関数の特殊なバージョンを使用して要素のテンプレートを評価することで機能します。この特別なrender関数は、ブラウザでLitが使用するrender関数とよく似ていますが、DOMに書き込む代わりに文字列のストリームを出力するため、静的HTMLとして効率的に書き出すことができます。

@lit-labs/ssrの詳細については、GitHubリポジトリをご覧ください。開発者が@lit-labs/ssrをより多くのツールやフレームワークに統合できるように、ドキュメントを近日中に拡張する予定です。

Declarative Shadow DOM

@lit-labs/ssrがコンポーネントをレンダリングする場合、コンポーネントのシャドウDOMとスタイルを表すために<template shadowroot> HTML要素を使用します。ブラウザのHTMLパーサーが<template shadowroot>を見つけると、そのテンプレートのコンテンツを親要素のシャドウルートとして適用します。このようにして、WebコンポーネントのすべてのDOMおよびスタイルのカプセル化の保証が維持されます。

2022年2月現在、ChromeとEdgeはDeclarative Shadow DOMをネイティブでサポートしていますが、FirefoxとSafariはまだ実装していません。サポートしていないブラウザには、非常に小さなpolyfillが用意されています。polyfillをサイトに統合する方法は、@lit-labs/eleventy-plugin-litのREADMEに記載されています。

Declarative Shadow DOMの詳細については、*Declarative Shadow DOM*を参照してください。

ハイドレーション

静的レンダリングにより、コンポーネントの初期描画をできるだけ早く行うことができますが、JavaScriptの実装が読み込まれていないため、コンポーネントはまだインタラクティブになりません。

*ハイドレーション*とは、静的にレンダリングされたコンポーネントをJavaScript実装にアップグレードして、応答性とインタラクティブ性を高めるプロセスです。

Litには、特別な@lit-labs/ssr-client/lit-element-hydrate-support.jsモジュールを介したハイドレーションの自動サポートが付属しています。このモジュールが読み込まれている限り、Litコンポーネントは静的にレンダリングされたことを検出し、既存のシャドウルートを採用します.

Litを使用したハイドレーションは非常に効率的です。これは、Litがアップグレード時に既存のシャドウルートを再レンダリングする必要がないことを知っているためです。ハイドレーション後にデータが変更された場合、変更されたシャドウルートの部分のみが更新されます。

今後の展望

今後数か月で予定されている主な機能と修正については、@lit-labs/eleventy-plugin-litのロードマップをご覧ください。

@lit-labs/eleventy-plugin-litをお試しいただき、ご意見や問題がございましたら、ディスカッションを開始するか、 issueを提出してください。

他の投稿を読む