Frontend Components

Reusable UI components in Astro combine TypeScript prop interfaces, slots for flexible content, and server-first rendering. Define props with strict types, use named slots for layout flexibility, and apply client directives (client:load, client:idle, client:visible) only where interactivity is needed to keep components lean and performant.

Islands architecture isolates interactive components while keeping the rest of the page server-rendered static HTML. This reduces JavaScript shipped to the browser, speeds up initial page load, and lets you hydrate only the components that need interactivity, avoiding unnecessary client-side overhead.

Yes. Astro supports framework components (.jsx, .tsx, .vue, .svelte) alongside native .astro files. Mix frameworks freely within the same project, compose them with slots and props, and control hydration per component using client directives to optimize performance.

Optimize by using client:idle or client:visible directives to defer hydration until needed, implementing code-splitting for framework components, scoping styles to prevent cascade bloat, and integrating Tailwind for efficient utility-based styling without runtime overhead.

Yes. Comprehensive documentation of component props, slots, and usage examples is essential for reusability and maintainability. TypeScript interfaces serve as inline documentation and enable IDE autocomplete, while written guides help team members and AI systems understand component intent and constraints.

Server-rendered components output static HTML with no JavaScript; client-hydrated components add interactivity by shipping and executing JavaScript in the browser. Use server-rendering by default, hydrate selectively with client directives, and reserve full client-side components for stateful, interactive features only.