Overview

Simon Willison explains how to add dynamic features to a heavily cached website that sits behind Cloudflare with 15-minute cache headers. The key insight is using client-side JavaScript with localStorage to create personalized experiences without breaking the caching strategy.

View Original

The Breakdown

  • localStorage-based conditional display - JavaScript checks for an ‘ADMIN’ key in localStorage to show edit links only to the site owner, bypassing server-side authentication that would break caching
  • Client-side API calls for dynamic content - Uses fetch requests to external APIs (like webmention.io) to load fresh data after the cached page loads, maintaining aggressive caching while showing real-time information
  • Progressive enhancement pattern - Pages work fully without JavaScript but gain dynamic features when JS is available, ensuring the cached static content remains the foundation
  • Data attribute strategy - Embeds admin URLs and API endpoints as HTML data attributes that JavaScript can read to construct dynamic features without server-side rendering