SSR progresivo y Trusted Types

Esta página describe WU Framework 4.0.0. Consulta la migración a Framework 4.0 y CLI 1.2 antes de actualizar un proyecto existente.

Streaming por aplicación

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.

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.

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 explica cancelación, loaders privados y el lifecycle de createServerRequest.