I first read about islands architecture when I was trying Astro for a project. Astro was still new at the time, but the idea made sense to me. If you ever used WordPress, the idea is familiar already. You have a page, you drop widgets into it (a comments section, a recent posts list, a search bar). Each widget does its own thing, does not interfere with the others. Islands architecture is exactly that mental model. Except instead of generating all the widget JavaScript upfront, you delay each one. The WordPress comparison Think of a typical WordPress page. The header, the article body, the footer (all rendered as plain HTML from the server). Then you have widgets in the sidebar: a search box, a tag cloud, a newsletter signup. Each widget is self-contained. You add it, configure it, and it renders in its own little box. Now imagine instead of shipping jQuery and all the widget scripts on every page load, you tell each widget: "hydrate when you are ready." The search box hydrates immediately because users might use it. The newsletter widget hydrates when the browser is idle. The tag cloud (maybe it does not need JavaScript at all,...
I run my site (the same one I wrote about in my brick and mortar business stack posts) behind a CDN. Every page request goes through it before hitting my backend (TanStack Start on Lambda). On a content site, most of those requests return the same HTML. It felt wasteful to have the Lambda wake up for every single one. The first option is a long cache header. Cache-Control: public, max-age=86400, s-maxage=86400. The CDN serves the cached version for a day, the Lambda stays cold, everyone wins. But there is a catch. When the cache expires at hour 25, the next visitor triggers a fetch. They wait. On a Lambda with a cold start, that wait is noticeable. Not terrible, but enough that I did not want to ship it. This is where stale-while-revalidate comes in. The header looks like this: Cache-Control: public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400 What it does: The CDN caches the response for 24 hours (s-maxage=86400). The browser caches it for 1 hour (max-age=3600). For another 24 hours after expiry, the CDN can serve the stale version instantly while it fetches a fresh copy in the background (stale-while-revalidate=86400). For a reader, the timeline is: First visit: CDN misses,...
← All tags
