# SSR progresivo y Trusted Types

Entrega apps por streaming con Shadow DOM declarativo y configura CSP y políticas de HTML.

Esta página describe WU Framework `4.0.0`. Consulta la [migración a Framework 4.0 y CLI 1.2](/es/docs/guides/releases/) antes de actualizar un proyecto existente.

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

## Streaming por aplicación

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

Los renders se inician hasta el límite de `concurrency`; sin límite, comienzan juntos. `order: "document"` entrega las apps en orden y no necesita scripts para recolocarlas. `order: "ready"` entrega cada app al terminar, deja placeholders y exige un `nonce` para los scripts que mueven nodos ya parseados. La unidad de streaming es la app completa, no cada componente del renderer. `streamToString` consume el stream: no intentes leerlo otra vez después.

`state: false` omite el script final de estado; `stateVarName` cambia su nombre. Con `failFast: true`, un error aborta el stream; por defecto queda el hueco y se llama a `onError`. Conecta el módulo cliente y su lifecycle de hidratación para obtener interactividad: recibir HTML del servidor no monta por sí solo los renderers del cliente. `renderReact` permite `auto`, `static` y `string`, según las APIs disponibles en React DOM instalado.

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

## Políticas de HTML y CSP

En el servidor, `securityHeaders({ nonce, trustedTypes: true })` genera las directivas correspondientes. Un array `trustedTypes` sustituye la lista de políticas permitidas. Usa un nonce nuevo por respuesta y el mismo valor en cabecera, estilos y scripts de esa respuesta. En producción configura HTTPS y los orígenes que realmente necesita tu shell.

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

`true` y `"sanitize"` instalan una política HTML predeterminada que aplica el sanitizador de WU. `"report"` registra escrituras sin sanearlas; úsalo para diagnóstico, no como protección. `"strict"` rechaza cadenas no selladas. Si ya existe una política predeterminada, WU la respeta. Las políticas no son un aislamiento de JavaScript ni una autorización de recursos remotos, y no sustituyen los grants ni la validación de los datos de tu aplicación.

Configura `signal`, `timeout` y `concurrency` para limitar el trabajo del stream. La [referencia SSR](/es/docs/framework/api-server/) explica cancelación, loaders privados y el lifecycle de `createServerRequest`.