astro-specialist

Astro renders components to static HTML unless you explicitly add hydration directives, shipping zero JavaScript by default. This reduces JS overhead while maintaining fast Lighthouse scores for content-driven sites.

Islands architecture in Astro isolates interactive components into standalone hydratable regions. Most page content remains static HTML, while only specific islands load JavaScript for interactivity, optimizing performance for marketing pages and blogs.

Astro content collections use src/content/ with Zod schemas to enforce type safety for structured content like blog posts and docs. You fetch this build-time data using getCollection, avoiding untyped frontmatter entirely.

Use build-time data fetching in Astro with Astro.glob or getStaticPaths for static content like marketing pages and docs. Only choose SSR when there is a genuine runtime data requirement that cannot be pre-rendered.

Astro supports scoped CSS styles natively using the <style> tag within components. Styles are automatically scoped to the component unless you explicitly need a global override, keeping CSS maintainable.

Astro has first-class TypeScript support. You should use typed props, typed content collections with Zod schemas, and typed Astro.props throughout your project to ensure complete type safety.