渲染

PWA Kit 架构建立在 React 的渲染系统之上，增加了对用户和开发人员都有利的特性。本架构指南详细介绍 PWA Kit 渲染系统的这些功能及其工作方式。特别关注 PWA Kit React SDK 和 Retail React App 的部分，这些部分共同为每个功能提供支持。

服务器端渲染

为了创造良好的第一印象，用户从您的网店请求的首页必须尽可能快地加载。但是第一个页面请求比后续页面请求需要更多的渲染时间。必须呈现页面上的每个组件，而不仅仅是需要更新的组件。对于关键的首页加载，我们使用服务器端渲染，因为它提供优化性能的强大工具：缓存。

Managed Runtime 的 CDN 缓存可以存储先前呈现的页面版本，并立即将其提供给用户。已完成的呈现速度最快！

要了解如何通过缓存提高性能，请参阅我们的最大化缓存命中率指南。

Tip

应用服务器

服务器端渲染的主要代码在应用服务器内部运行。应用服务器是一个 Express 应用，它处理传入的 HTTP 请求并调用 render 作为响应函数。应用服务器在 app/ssr.js 中定义。

render 函数从 PWA Kit React SDK 导入。辅助函数（也来自 SDK）创建 Express 实例并将 render 函数作为所有 GET 请求的 Express 路由方法附加到该实例。

客户端渲染

在首页加载之后，渲染任务通过一个称为 hydration 的过程从服务器端转移到客户端。）在 hydration 期间，您的 React 应用程序开始在用户的浏览器中运行。事件处理程序开始行动以响应用户输入。页面元素根据需要和客户端渲染中的用户输入进行渲染。这种更高效且用户导向的渲染实现了 React 著名的流畅体验。

PWA Kit 架构在幕后工作，使从服务器端渲染到客户端渲染的过渡尽可能顺利。例如，您的所有组件都预加载了所需要的所有道具，甚至是 API 请求结果的道具。在服务器端渲染期间，这些道具被序列化并嵌入到页面源中，以便它们可以在 hydration 期间使用。

同构代码

因为在服务器端和客户端环境中都呈现相同的代码，所以它必须是同构的。同构 JavaScript（也称为通用 JavaScript）是一种代码，它不依赖于直接访问任何仅在一个或另一个运行时环境中可用的代码结构。当构造在两种环境中都不可用时，您必须在其周围添加条件代码以确保它在当前环境中可用。

下表列出了一些必须与条件代码一起使用的常用构造：

构造	说明	可供性
`window.location`	仅来自浏览器客户端的当前 URL
`req`	仅来自 Express 服务器端的 HTTP 请求
`res`	仅来自 Express 服务器端的 HTTP 响应

要确定渲染是在客户端还是服务器端进行，请检查 window 对象是否存在。以下示例使用此技术仅在客户端呈现价格：

1<div>
2  {/* The price is only rendered on the client side,
3   * because it changes frequently */}
4  {typeof window != 'undefined' && <p>Price: ${price}</p>}
5</div>

某些内容（例如个性化或经常更改的内容）必须_仅_在客户端呈现，以获得最佳性能。有关更多信息，请参阅我们的最大化缓存命中率指南。

Note

关联 ID

PWA Kit 渲染系统在每个页面上提供关联 ID（采用 UUID v4 格式）。关联 ID 可用于将 PWA Kit 的请求和响应与其他系统（例如 B2C Commerce API）中的活动进行匹配。

在服务器端，关联 ID 设置为 Managed Runtime 基础结构的 API 网关中的 requestId 值。在客户端，通过内置 Web Crypto API 的 randomUUID() 方法使用每个页面导航生成 UUID。

要在 PWA Kit 应用程序中获取关联 ID，请导入 useCorrelationId Hook：

1import {useCorrelationId} from 'pwa-kit-react-sdk/ssr/universal/hooks'
2
3const AppConfig = ({children}) => {
4  const {correlationId} = useCorrelationId()
5  return <div>{children}</div>
6}

您可以通过 correlation-x 标头将关联 ID 从 PWA Kit 转发到 B2C Commerce API。在响应中，转发的关联 ID 在 x-correlation-id 标头中返回，并与 API 的内部 ID 相结合。

要了解有关使用关联 ID 与 B2C Commerce API 的更多信息，请参阅关于 B2C Commerce API。

接下来的步骤

通过查看 app/ssr.js 中的源代码来更深入地了解渲染。它包含重要的应用服务器设置，例如页面的默认缓存有效周期。

在阅读 PWA Kit 文档时，不要错过 Retail React App 架构指南。