# SSR progressivo e Trusted Types

Entregue apps por streaming com Shadow DOM declarativo e configure CSP e políticas de HTML.

Esta página descreve o WU Framework `4.0.0`. Consulte o [guia de migração para Framework 4.0 e CLI 1.2](/pt/docs/guides/releases/) antes de atualizar um projeto existente.

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

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

## Streaming por aplicação

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

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.

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

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

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

```js
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](/pt/docs/framework/api-server/) explica cancelamento, loaders privados e o lifecycle de `createServerRequest`.