サーバーサイドレンダリング (SSR)

サーバーサイドレンダリング（SSR）は、JavaScriptの実装がロードおよび実行される前に、シャドウDOMとスタイルを含むコンポーネントのHTMLを生成および提供する手法です。

SSRはさまざまな理由で使用できます。

• パフォーマンス。 JavaScriptのロードを待たずに最初に静的なHTMLをレンダリングし、次に（オプションで）ページのJavaScriptをロードしてコンポーネントをハイドレートすると、一部のサイトではレンダリングが高速になる場合があります。
• SEOとウェブクローラー。 主要な検索エンジンのウェブクローラーは、JavaScriptが有効な完全なブラウザーでページをレンダリングしますが、すべてのウェブクローラーがJavaScriptをサポートしているわけではありません。
• 堅牢性。 JavaScriptのロードに失敗した場合や、ユーザーがJavaScriptを無効にしている場合でも、静的なHTMLはレンダリングされます。

サーバーサイドレンダリングの概念と手法について詳しく知りたい場合は、web.devのRendering on the Webをご覧ください。

Litは、Lit SSRパッケージを介してサーバーサイドレンダリングをサポートしています。 Lit SSRは、Nodeのような非ブラウザのJavaScript環境で、Litコンポーネントとテンプレートを静的なHTMLマークアップにレンダリングします。 これはブラウザのDOMを完全にエミュレートすることなく機能し、Litの宣言的なテンプレート形式を利用して、高速なパフォーマンス、低いTime-to-First-Byteの達成、およびストリーミングをサポートします。

Lit SSRは、Nodeベースのサーバーまたはサイトジェネレーターで直接使用できる低レベルのライブラリです。 Koaサーバーで使用されているLit SSRの例をご覧ください。

Lit SSRをすぐに使用できるようにする多くの統合も公開されています

• Lit Eleventyプラグイン
• LitのAstro統合
• Rocket
• @lit-labs/nextjsを使用したNext.jsページルーター
• nuxt-ssr-litを使用したNuxt 3
• ...そして、さらに開発中です！

このライブラリは活発に開発されており、解決を希望するいくつかの注目すべき制限があります

• 非同期コンポーネントの作業はサポートされていません。 #2469を参照してください。
• シャドウDOMを使用するLitコンポーネントのみがサポートされています。#3080を参照してください。
• 宣言的シャドウDOMはまだすべての主要ブラウザに実装されていませんが、ポリフィルが利用可能です。 詳細については、クライアントでの利用を参照してください。
• また、他のカスタム要素との相互運用に関するElementRendererRegistryについて、議論する必要のあるオープンな議論もあります。

このページを編集