Client-side post-hydration fetch vs short-TTL edge caching for Vue Storefront mini-cart counters on cacheable catalog pages

In Vue Storefront (Alokai), anonymous catalog pages are usually cached in layers: a server-side cache such as Redis for API and SSR aggregation, plus a CDN for anonymous traffic, while cart, checkout, and customer routes are excluded from shared caches. The unresolved point is how to render personalized header fragments—mini-cart counters, wishlist totals, or group pricing—inside an otherwise cacheable page.

There is no single documented default for these fragments. A team must choose between fetching them client-side after hydration so cached HTML stays generic, or accepting a short TTL on the full page and tolerating brief staleness. Each option trades latency and origin load against correctness and complexity.

Cache-key dimensions and route exclusions differ across Vue Storefront and Alokai releases, so the behavior is version-sensitive and should be confirmed against the installed version's documentation and staging behavior.

Which approach better matches documented caching behavior for personalized fragments on cacheable catalog pages: client-side post-hydration fetching, or short-TTL edge caching with server-side invalidation? How should cache keys and route exclusions be scoped so store, currency, locale, and customer-group data never bleed across sessions? At what staleness threshold should a mini-cart counter be treated as private and excluded from shared caches entirely?