Lit SSR 客户端使用

此包是 Lit Labs 系列实验性包的一部分。有关在生产中使用 Labs 软件的指南，请参阅 Lit Labs 页面。

Lit SSR 为浏览器生成静态 HTML，以便浏览器解析和绘制，无需任何 JavaScript。（不支持声明式 Shadow DOM 的浏览器将需要一些 JavaScript polyfill 才能使用 Lit 组件，这些组件被编写为利用 Shadow DOM。）对于包含静态内容的页面，这已经足够了。但是，如果页面内容需要是动态的并响应用户交互，则需要 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 DOM 中的模板进行水合。

升级可以通过简单地加载注册自定义元素的组件模块来实现。这可以通过加载一个包含页面所有组件定义的包来实现，或者可以根据更复杂的启发式算法来实现，其中只有必要时才加载定义的子集。为了确保 LitElement Shadow DOM 中的模板得到水合，请加载 @lit-labs/ssr-client/lit-element-hydrate-support.js 模块，该模块为 LitElement 安装支持，以便在检测到它是用声明式 Shadow DOM 服务器渲染时自动水合自身。此模块必须在加载 lit 模块之前加载（包括导入 lit 的任何组件模块），以确保正确安装水合支持。

当 Lit 组件在服务器端渲染时，它们的 Shadow DOM 内容在 <template shadowroot> 内发出，也称为声明式 Shadow Root。声明式 Shadow DOM 会在解析 HTML 时自动将内容附加到模板父元素上的 Shadow DOM，无需 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 之前隐藏主体，以防止布局偏移。

<!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 编写组件