Streaming de HTML Fora de Ordem Sai dos Frameworks e Chega aos Navegadores
O padrão de streaming de HTML fora de ordem, que permite aos usuários visualizar e interagir com uma página antes que ela seja totalmente carregada, está chegando aos navegadores web. Segundo a proposta, o navegador preenche placeholders conforme os dados chegam, via HTML declarativo ou APIs JavaScript correspondentes. Chrome 151 já traz os recursos declarativos, enquanto Safari e Firefox sinalizaram apoio.
A Abordagem Declarativa
A proposta declarativa introduz o streaming fora de ordem com o elemento padrão <template> através de um novo atributo for. Os desenvolvedores declaram pontos de inserção únicos (ex: <template id="profile"></template>) ou envolvem conteúdo fallback temporário (ex: Loading profile...).
Quando o servidor faz streaming de um <template> correspondente adiante no documento, o parser HTML encontra o identificador, remove os marcadores <template> e seus correspondentes, junto com qualquer nó fallback intermediário entre eles, e insere o conteúdo do template naquela posição do DOM. Os desenvolvedores também podem incluir instruções de processamento em templates para permitir múltiplas atualizações.
Após o template HTML ser analisado e processado, o HTML resultante na página fica como esperado.
Segurança e Escopo
Para prevenir ataques de injeção entre componentes (ex: markup não confiável sequestrando formulários sensíveis ou destinos de navegação em outro lugar do documento), um <template> pode estritamente apenas preencher instruções de processamento (nós de markup que começam com delimitadores) localizados dentro de seu elemento pai imediato (seus irmãos diretos e seus descendentes). Como exceção explícita da especificação, colocar o template diretamente sob <body> concede a ele escopo de documento global, permitindo atualizações adiadas alcançarem elementos dentro da tag <head> ou contêineres estruturais aninhados.
Extensão para Scripts do Lado do Cliente
Para estender fluxos de streaming para scripting do lado do cliente, a iniciativa emparelha estas primitivas de markup com um conjunto unificado de métodos de inserção DOM estáticos e de streaming. A especificação define uma matriz previsível de operações: setHTML(), replaceWithHTML(), beforeHTML(), prependHTML(), appendHTML() e afterHTML(), junto com métodos de streaming correspondentes (streamHTML(), streamAppendHTML(), etc.) e variantes *Unsafe. Invocar streamHTMLUnsafe(), por exemplo, retorna um que encancha de forma incremental chunks chegando para um parser de fragmento HTML interno. A Fetch API complementa isso com o helper :
