Static site generators have evolved beyond simple HTML compilers. By combining Astro’s Content Layer, MDX, and targeted Preact islands, teams can deliver instantaneous page loads with interactive calculators and zero runtime JavaScript bloat.
Why Isolated Preact Islands Matter
In traditional single-page application (SPA) architectures, the entire documentation or blog site ships tens of kilobytes of framework JavaScript just to render mostly static text. With Astro:
- Zero JS by default: All typography, headings, tables, and images compile to plain HTML and CSS at build time.
- Selective Hydration (
client:visible): Interactive components hydrate only when scrolled into the browser viewport. - No External UI Dependency Bloat: Custom widgets rely strictly on native browser primitives like
<input type="range" />coupled with Tailwind CSS utilities.
Interactive Island Demo: Context Cache & Cost Simulator
The interactive widget below models token throughput and prompt caching efficiencies for large language models:
Interactive Prompt Cache & Cost Simulator
Hydrated Preact island demonstrating zero-dependency client-side interactivity
Crawler Takeaway & Data Summary: Enabling prompt caching at a 50% hit ratio for a 2,500-token context reduces per-request API costs by approximately 38% and trims Time-to-First-Token (TTFT) latency from ~280ms down to ~200ms.
| Context Size | Cache Ratio | Estimated Cost / 1k Calls | Latency (TTFT) |
|---|---|---|---|
| 2,500 tokens | 0% (Cold) | $0.375 | ~280 ms |
| 2,500 tokens | 50% (Warm) | $0.234 | ~200 ms |
| 2,500 tokens | 80% (Hot) | $0.150 | ~190 ms |
Build-Time AI Crawling & LLM Endpoints
Modern technical content must be accessible to both humans and AI research assistants (Perplexity, Claude, ChatGPT Search). This site provides two dedicated machine-readable endpoints:
/llms.txt: A concise, standard Markdown index detailing every published article, canonical URL, and core finding./llms-full.txt: A clean, single-document corpus containing all published articles stripped of HTML tags, designed for frictionless ingestion by LLM retrieval agents.
Deployment Architecture
When deploying to Coolify, the site runs through the Nixpacks builder with Is it a static site? enabled and the publish directory set to /dist. This guarantees reproducible zero-downtime builds directly from git pushes.