How Declarative Partial Updates Work in HTML

                     How Declarative Partial Updates Work in HTML
               



Tópico:
                     How Declarative Partial Updates Work in HTML
               
Categoria: Tutoriais | FreeCodeCamp Premium
Idioma Principal: Português (Conteúdo de Tecnologia)

Conteúdo do Tutorial / Guia Passo a Passo:
-------------------------------------------------------------------------
HTML has always supported streaming. The server doesn't need to build an entire page in memory before sending it to the browser. It can send the initial HTML first, then send more chunks as each chunk is ready. The browser parses those chunks and displays the page in order. This is one reason why HTML seems fast.

But traditional HTML streaming has a strict rule. The HTML comes in the order of the document. If the browser gets the header first, then the sidebar, and finally the main content, it parses those chunks in that order. If a slow database query blocks a chunk of the page early on, the next chunk often has to wait until it's ready on the server.

JavaScript frameworks have been solving this problem for years. Server-rendering frameworks handle shell, suspense boundaries, loading state, and late content streaming. Some frameworks use inline script to patch the existing DOM. Libraries like HTMX allow developers to update parts of a page with server-generated HTML.

But these solutions require JavaScript somewhere. Declarative Partial Updates raise a different question. What if HTML had its own way of saying,

When this content comes in, put it there?

That's the idea behind Chrome's declarative partial updates proposal.

In this article, you'll learn what problems declarative partial updates aim to solve, how the proposed placeholder syntax works, how out-of-order HTML streaming differs from normal streaming, how the related JavaScript HTML insertion APIs fit in, and why it should be considered an experimental feature of the browser rather than production-ready HTML.

Table of Contents

• What Problem Declarative Partial Updates Try to Solve

• How Traditional HTML Streaming Works

• Why Frameworks Already Work Around This Problem

• What Declarative Partial Updates Add to HTML

• How Marker Placeholders Work

• How Start and End Range Placeholders Work

• How Multiple Updates Work

• How Interleaved Updates Work

• How This Compares to React, HTMX, Astro, and PHP

• How the JavaScript HTML Insertion APIs Fit In

• How to Build a Small Node.js Streaming Demo

• Browser Support and Current Status

• Security, Sanitization, and Sharp Edges

• What This Means for Web Developers

• Conclusion

What Problem Declarative Partial Updates Try to Solve

Consider a product page. The server already knows the page title, navigation, footer, and product details. But the recommendations section requires a slow database query. With traditional server-rendered HTML, you have two common options:

• First, the server waits until everything is ready, then sends a full HTML response. This keeps the code simple, but the user waits a long time before seeing anything useful.

• Second, the server streams the HTML in stages. It sends the top of the page first, then sends the rest as it's ready. This seems to improve performance, because the browser starts rendering before the full response is finished.

But streaming alone doesn't completely solve this problem. The browser still parses the HTML sequentially. If there's a slow recommendation block at the beginning of the document, the content after that block will wait behind it, unless you restructure the document, add JavaScript, or use a framework abstraction.

WICG Patching Explainer describes two limitations of traditional HTML streaming:

• HTML content is streamed in DOM order.

• After the initial document parsing step, streaming is no longer as act

... [O tutorial continua no link abaixo] ...