HTML Streaming

¿Qué es?

Una técnica para enviar HTML al navegador de forma incremental.

El server empieza a responder antes de tener todo el HTML, va emitiendo fragmentos (chunks) y el navegador los va pintando conforme llegan.

No es un estándar nuevo. Es HTTP/1.1 + chunked transfer + HTML.

Tradicional vs Streaming

Clave: no es necesario esperar al </html> para empezar a mostrar contenido.

El truco: Transfer-Encoding: chunked

HTTP permite al server enviar una respuesta sin conocer el tamaño total por adelantado.

Formato de cada chunk (en bytes crudos):

Cada chunk es tamaño_hex + \n + datos + \n. El chunk 0 marca el final.

¿Cómo funciona?

La conexión se mantiene abierta. El server "empuja" HTML al cliente sin que éste tenga que pedirlo.

En el cliente

fetch + ReadableStream: dos APIs nativas del navegador, ningún framework.

// 1. Abrir el stream
const res    = await fetch("/api/messages")
const reader = res.body.getReader()
const decoder = new TextDecoder("utf-8")
let buffer = ""

// 2. Leer hasta que el server cierre
while (true) {
  const { value, done } = await reader.read()
  if (done) break

  buffer += decoder.decode(value, { stream: true })

  // 3. Extraer cada <article> completo del buffer
  let start = buffer.indexOf("<article")
  while (start !== -1) {
    const end = buffer.indexOf("</article>", start)
    if (end === -1) break
    insertHTML(buffer.slice(start, end + 10))
    buffer = buffer.slice(end + 10)
    start = buffer.indexOf("<article")
  }
}

Insertar HTML de forma segura

function insertHTML(html) {
  const tpl = document.createElement("template")
  tpl.innerHTML = html                    // parsea, no ejecuta
  container.appendChild(tpl.content)  // se mueve al DOM real
}

¿Por qué es seguro?

• Los textos vienen escapados del server (<, >, &, ").
• <template> parsea HTML pero no ejecuta <script> ni carga <img>.
• No hace falta DOMPurify ni sanitización extra en el cliente.

HTML Streaming vs. WebSockets vs. SSE

HTML Streaming es el más simple: sólo HTTP y un loop de flush() en el server.

Casos de uso

Limitaciones y caveats

• Proxies que bufferean. nginx/Cloudflare a veces esperan a tener toda la respuesta. Solución: header X-Accel-Buffering: no.
• No es bidireccional. El cliente no puede enviar datos por la misma conexión. Para eso existe WebSockets.
• HTTP/2 multiplexa. Cada stream HTTP/2 puede llevar su propio chunked, lo que cambia la dinámica de "una conexión por evento".
• Reconexión manual. Si la conexión se cae, hay que volver a llamar a fetch(). SSE lo hace solo.
• HTTPS ayuda. Los intermediaries de HTTP/1.1 en claro a veces meten mano. Con TLS el path es más predecible.