Partial rendering#
Partial rendering updates a slice of a page instead of reloading the whole document. A form re-renders only the form that failed, a filter swaps only the result list, a modal carries a wizard, and a stream pushes fresh results to every open tab. The server authors every DOM operation and the client applies it. Selectors and swap strategies never cross the wire.
Every interaction in this section degrades to a full page cycle when JavaScript is off, layered on top of the same POST then 303 then GET flow the framework already serves.
Read Partial rendering by scenario first. It walks seven concrete tasks from markup to handler, and the rest of the section deepens one concern at a time.
The tutorial
- Partial rendering by scenario
Seven scenarios from task to markup to handler, from neighbouring forms and inline validation to an auto-submitting filter, pagination and infinite scroll, a live stream, a modal wizard that refreshes a list, and lazy zones.
Concepts
- How a partial request flows
One partial update followed end to end, from the zone in the template to the envelope on the wire to the morph in the browser.
- Zones save render and traffic
Why zones are an optimisation rather than required markup, what the extract default costs today, and the keying rule for dynamic list rows.
- Wizard done choreographies
The two ways a wizard inside a modal refreshes the list on the page beneath it, compared honestly.
- Co-located JavaScript under partial updates
Three idioms for co-located JavaScript that survives a partial update, and the one anti-pattern that does not.
- Framework islands
Mounting a Vue or React root into a zone and unmounting it cleanly, through the events and the preservation attribute the runtime ships.
- SSE under WSGI and ASGI
Streaming patch envelopes over Server-Sent Events, the WSGI and ASGI contract, and the refresh fan-out pattern.
- Extending the protocol
The three seams that open the protocol to an application, a custom verb, a server-pushed context value, and a server-fired event.
Reference
- Limitations
The boundaries the model draws on purpose, from the synchronous zone render to the single active backend, and what to reach for at each one.
- Partial rendering reference
The patch verbs, request and response headers,
data-next-*attributes, andPARTIAL_BACKENDSsettings, in tables.
See also
CSP and nonce for serving the runtime under a Content Security Policy.