Lit SSR 客戶端用法

此套件是 Lit Labs 實驗性套件系列的一部分。請參閱 Lit Labs 頁面，以獲取在生產環境中使用 Labs 軟體的指南。

Lit SSR 會產生靜態 HTML，讓瀏覽器在不使用任何 JavaScript 的情況下進行解析和繪製。(對於不支援宣告式 Shadow DOM 的瀏覽器，對於使用 Shadow DOM 撰寫的 Lit 元件，將需要一些 JavaScript polyfill。) 對於具有靜態內容的頁面，這就是所需的全部內容。但是，如果頁面內容需要是動態的並響應用戶互動，則將需要 JavaScript 來重新應用該響應性。

如何在客戶端重新應用響應性取決於您是渲染獨立的 Lit 模板還是使用 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 元件，需要載入自訂元件定義，才能升級、啟用其生命週期回呼，並且需要水合元件 shadow root 中的模板。

只需載入註冊自訂元件的元件模組，即可實現升級。這可以透過載入頁面的所有元件定義的捆綁包來完成，也可以根據更複雜的啟發式方法來完成，其中僅在需要時載入定義的子集。為了確保 LitElement shadow root 中的模板水合，請載入 @lit-labs/ssr-client/lit-element-hydrate-support.js 模組，該模組安裝對 LitElement 的支援，使其在偵測到已使用宣告式 shadow DOM 進行伺服器渲染時自動水合自身。此模組必須在載入 lit 模組（包括任何匯入 lit 的元件模組）之前載入，以確保正確安裝水合支援。

當 Lit 元件進行伺服器渲染時，其 shadow root 內容會在 <template shadowroot> 內發出，也稱為宣告式 Shadow Root。當 HTML 被解析時，宣告式 shadow root 會自動將其內容附加到模板父元素上的 shadow root，而無需 JavaScript。

在所有瀏覽器都包含宣告式 shadow DOM 支援之前，可以使用一個非常小的 polyfill，可以內聯到您的頁面中。這可讓您立即對任何啟用 JavaScript 的瀏覽器使用 SSR，並在該功能推廣到其他瀏覽器時逐步解決非 JavaScript 使用案例。以下說明了 template-shadowroot polyfill 的用法。

載入 `@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` polyfill

到「使用 template-shadowroot polyfill」的永久連結

以下 HTML 片段包含一個可選策略，可在載入 polyfill 之前隱藏 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 polyfill 載入的策略，並提供了一個具有 SSRed 元件的頁面，以在客戶端進行水合。

Koa 伺服器中的 Lit SSR

編輯此頁面

上一個 Lit SSR 伺服器用法下一個為 Lit SSR 撰寫元件