When we started planning HoTMoL, the framework decision was the first real fork in the road. We needed something that could handle a large component library, support a structured content pipeline, deploy as static HTML with no server overhead, and stay out of the way when a developer is assembling client pages. Astro checked every box.
Static by Default, Dynamic When Needed
The vast majority of service-business websites don’t need a runtime. They need fast, indexable HTML delivered from a CDN. Astro prerenders everything by default: every route, every page, every component. The output is plain .html files. No Node process to babysit in production, no cold starts, no compute costs.
When you do need interactivity (a contact form endpoint, a dynamic slug page), you opt in with a single line: export const prerender = false. The rest of the site stays static. That’s the right mental model for this type of work.
Content Collections with Zod Schemas
Astro’s content collections gave us exactly the data layer we needed. Services, team members, blog posts, locations, testimonials: each lives as YAML or Markdown in src/content/, typed with Zod schemas defined in src/content.config.ts. The schema validates on build, so typos and missing required fields fail at compile time rather than silently rendering nothing in production.
The collection API is clean enough that self-fetching components work without any global state or prop drilling:
const services = await getCollection('services', ({ data }) => !data.draft);No store, no context, no provider tree. The component fetches its own data at build time and renders to static HTML.
Islands Architecture for Selective Hydration
Swiper carousels, dark mode toggles, and copy-link buttons all need JavaScript. Everything else doesn’t. Astro’s islands architecture lets us ship components that are HTML-only by default and only hydrate the specific pieces that require client-side behavior.
The result is a near-zero JavaScript payload on most pages. A typical HoTMoL page with no slider sends less than 5KB of JS to the browser. That directly affects Core Web Vitals scores, which matter for the local service businesses this system is built for.
The Developer Experience
Astro’s .astro files feel natural. The frontmatter fence is just JavaScript. The template is JSX-adjacent without the JSX overhead. Lucide icons, TailwindCSS v4, and TypeScript all integrate without configuration friction.
For a component library of 165+ pieces, that frictionless composition model was non-negotiable. Every component follows the same pattern: destructure props with defaults in the frontmatter, render in the template. Any developer who has read one can read them all.
The Right Tool for This Job
There are frameworks better suited for highly interactive applications, real-time dashboards, and complex client-side state. HoTMoL isn’t building those. It’s building fast, credible, low-maintenance websites for plumbers, HVAC companies, law firms, and landscapers. For that job, Astro is the best framework available.