This week in caching: cache the page, personalize the bits (ESI playbook)

This week in caching: cache the page, personalize the bits (ESI playbook)

How to full-page-cache a 'logged in as Jane' header. Gold if personalization is killing your hit ratio.

— Split static from dynamic — mark the user widget as an ESI fragment: <esi:include src="/_user-bar"/>; the page caches, the fragment doesn't.
— Cache fragments independently — the user-bar can have its own short TTL while the article body lives for hours.
— Fall back gracefully — define esi:remove content so a fragment-service outage shows generic UI, not a broken page.
— Watch the fan-out — every ESI include is an origin sub-request; 30 fragments per page can erase the win. Keep it to 1-3.
— Prefer client-side hydration for trivial bits — if it's just a name, an async fetch may beat ESI complexity.

Credit to the W3C ESI spec and Symfony's HttpCache ESI docs.

Bookmark: Symfony's 'Edge Side Includes' guide — best practical walkthrough.