Astro, Island Technology in the Name of Optimization

Chmal contrasts interactive applications with content-heavy sites, where frameworks such as Next.js can send JavaScript that a page may not need. Astro renders without client-side JavaScript by default, while allowing interactive features when needed. He sees it as a fit for blogs, news pages, shops, portfolios, and company sites.

Astro uses file-based routing and supports pages written in HTML, JavaScript, Markdown, Astro components, or React. Astro components run their frontmatter JavaScript on the server, so API calls and database queries there are not sent to the browser. Content collections can validate metadata with Zod and generate TypeScript types; Astro also offers pagination and build-time image optimization.

Teams can add interactive islands using React, Solid, Svelte, Preact, or other integrated UI frameworks, and choose when to hydrate them with directives such as `client:load`, `client:idle`, and `client:visible`. Astro supports pre-rendered, server-rendered, and hybrid pages. API endpoints can keep third-party credentials on the server while providing data to UI components.

Astro's View Transitions integration can animate navigation between pages, while `transition:persist` preserves a client-only component's state across navigation. Chmal recommends considering Astro when limiting JavaScript matters, especially for content-focused sites, and notes that highly interactive applications may suit other tools better. In questions, he says Astro pages can coexist with a React app on a wildcard route, and that image processing happens at build time, which can add minutes for large image sets.