Edge Async Render

How it works

Async rendering loads page sections progressively. Each section is bound to a time budget:

• Sections whose loaders finish within the budget are rendered directly into the initial HTML.
• Sections whose loaders exceed the budget render a loading skeleton first. Once the page reaches the browser, the client fetches and patches the real content.

Off-screen sections don’t load until the user scrolls near them.

Stale Edge Cache

When a section is fetched asynchronously, its rendered HTML is cached at the CDN edge. Subsequent requests for the same section are served directly from the CDN, skipping the origin entirely.

Default TTL:

The long stale window means users almost always get an instant response from cache, even when the CDN entry has technically expired.

What determines if a section can be cached

A section’s cacheability depends entirely on its loaders:

• If any loader is not configured for caching, the section response is not cached at the CDN.
• If all loaders are configured for caching, the section is cached.

See Caching data loaders for how to configure loader cache.

Enabling and disabling

Async rendering is enabled by default for all sections. To disable it for a specific section, turn off the Optimization option in the section properties in the Admin.

Benefits

• Faster initial response: Heavy sections don’t block the first HTML byte.
• CDN caching of sections: Popular sections are served from the edge with near-zero latency.
• Resilience: Stale content is served if the origin is slow or down (up to 24h).
• Reduced layout shifts: Implement LoadingFallback in sections to show a skeleton during async loading. See LoadingFallback documentation.

See also

• Caching data loaders
• HTML Page Cache
• Async Rendering blog post