# 渐进式 SSR 与 Trusted Types

使用声明式 Shadow DOM 流式交付应用，并配置 CSP 与 HTML 策略。

本页介绍 WU Framework `4.0.0`。升级现有项目之前，请阅读 [Framework 4.0 与 CLI 1.2 迁移指南](/zh-cn/docs/guides/releases/)。

<span id="streaming-por-aplicación"></span>

<span class="section-anchor" id="section-1"></span>

## 按应用流式输出

```js
import { renderAppsStream, streamToString, createNonce,
  securityHeaders } from 'wu-framework/server';

const nonce = createNonce();
const headers = securityHeaders({ nonce, https: false });
const stream = renderAppsStream([
  { name: 'summary', module: { render: async () => ({
    html: '<p>Summary ready</p>', styles: 'p { color: teal }',
    state: { ready: true },
  }) } },
  { name: 'details', module: { render: async () => '<p>Details ready</p>' } },
], {
  order: 'ready', nonce,
  head: '<!doctype html><html lang="en"><head><title>WU stream</title></head><body>',
  tail: '</body></html>',
  onError: ({ app, error }) => console.error(app, error),
});

// Fetch-compatible server handler: return this Response.
const response = new Response(stream, { headers: {
  ...headers, 'Content-Type': 'text/html; charset=utf-8',
} });
// Tests may consume a fresh stream with await streamToString(stream).
```

Renders 启动到 `concurrency` 限制为止；无限制时一起启动。`order: "document"` 按顺序交付应用，无需脚本调整位置。`order: "ready"` 在每个应用完成时交付，保留 placeholders，并要求为移动已解析节点的脚本提供 `nonce`。流式单位是整个应用，而非 renderer 的每个组件。`streamToString` 会消费流，之后不要尝试再次读取。

`state: false` 省略末尾状态脚本，`stateVarName` 修改其名称。启用 `failFast: true` 时，错误会中止流；默认保留占位并调用 `onError`。要实现交互，需连接客户端模块与水合生命周期，服务端 HTML 本身不会挂载客户端渲染器。`renderReact` 根据已安装 React DOM 的 API 支持 `auto`、`static` 与 `string`。

<span id="políticas-de-html-y-csp"></span>

<span class="section-anchor" id="section-2"></span>

## HTML 策略与 CSP

服务端可通过 `securityHeaders({ nonce, trustedTypes: true })` 生成相应指令。`trustedTypes` 数组会替换允许的策略列表。每次响应使用新的 nonce，并在该响应的头部、样式与脚本中使用同一值。生产环境应配置 HTTPS 和宿主实际需要的源。

```js
import { wu } from 'wu-framework';
await wu.init({ trustedTypes: 'sanitize', apps: [] });
```

`true` 与 `"sanitize"` 安装使用 WU 清理器的默认 HTML 策略。`"report"` 仅记录写入而不清理，应仅用于诊断。`"strict"` 拒绝未经封装的字符串。WU 会尊重已有默认策略。这些策略不提供 JavaScript 隔离，也不授予远程资源访问权限，不能替代授权与应用数据验证。

配置 `signal`、`timeout` 和 `concurrency` 以限制流的工作。[SSR 参考](/zh-cn/docs/framework/api-server/)介绍取消、私有 loaders 和 `createServerRequest` 生命周期。