the problem with spa frameworks for tool sites

When you're building a site full of small interactive tools — calculators, formatters, generators — most frameworks ship too much JavaScript. Your users bounce because the page is slow to interactive.

astro's island architecture

Astro renders HTML at build time and ships zero JS by default. Interactive components (tool logic) are isolated "islands" that hydrate independently. Everything else is static HTML — fast, crawlable, and zero-overhead.

the vanilla js approach

For simple tools (fee calculators, formatters), you don't need a framework at all. Inline <script> tags with vanilla JS are enough. Astro's is:inline directive keeps script execution in page context, which is exactly right for tools that read form inputs and write to DOM.

what this means for seo

  • Static HTML means Google indexes your tool pages on first crawl, not after JS executes
  • Core Web Vitals are excellent out of the box — LCP from static HTML is typically under 0.5s
  • No client-side routing means no flash of unstyled content on navigation

practical setup

// astro.config.mjs
export default defineConfig({
  output: 'static',
  site: 'https://yoursite.dev',
});

Deploy to Cloudflare Pages with npm run build and you're done. No server, no runtime, no maintenance.