渐进式 SSR 与 Trusted Types

本页介绍 WU Framework 4.0.0。升级现有项目之前，请阅读 Framework 4.0 与 CLI 1.2 迁移指南。

按应用流式输出

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。

HTML 策略与 CSP

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

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

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

配置 signal、timeout 和 concurrency 以限制流的工作。SSR 参考介绍取消、私有 loaders 和 createServerRequest 生命周期。