SSR progressivo e Trusted Types

Esta página descreve o WU Framework 4.0.0. Consulte o guia de migração para Framework 4.0 e CLI 1.2 antes de atualizar um projeto existente.

Streaming por aplicação

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).

Os renders iniciam até o limite de concurrency; sem limite, começam juntos. order: "document" entrega as apps em ordem e dispensa scripts para reposicioná-las. order: "ready" entrega cada app ao terminar, deixa placeholders e exige um nonce para scripts que movem nós já interpretados. A unidade de streaming é a app completa, não cada componente do renderer. streamToString consome o stream: não tente lê-lo novamente depois.

state: false omite o script final de estado; stateVarName muda seu nome. Com failFast: true, um erro aborta o stream; por padrão o espaço permanece e onError é chamado. Conecte o módulo cliente e o lifecycle de hidratação para obter interatividade: HTML do servidor não monta renderers clientes sozinho. renderReact aceita auto, static e string conforme as APIs do React DOM instalado.

Políticas de HTML e CSP

No servidor, securityHeaders({ nonce, trustedTypes: true }) gera as diretivas correspondentes. Um array trustedTypes substitui a lista de políticas permitidas. Use um nonce novo por resposta e o mesmo valor no cabeçalho, estilos e scripts dessa resposta. Configure HTTPS e as origens necessárias ao shell em produção.

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

true e "sanitize" instalam uma política HTML padrão com o sanitizador WU. "report" registra escritas sem sanitizá-las; use para diagnóstico, não proteção. "strict" rejeita strings não seladas. WU respeita uma política padrão existente. Políticas não são isolamento de JavaScript nem autorização de recursos remotos e não substituem grants ou validação dos dados da aplicação.

Configure signal, timeout e concurrency para limitar o trabalho do stream. A referência SSR explica cancelamento, loaders privados e o lifecycle de createServerRequest.