Islands architecture and client directives

Implement Islands Architecture to convert most pages into fast static HTML, loading JavaScript only for specific interactive or personalized regions like image carousels. Avoid monolithic payloads that hinder responsiveness by using selective hydration instead of single-page application approaches. Mark interactive components with client directives, such as client:idle or client:visible, to control loading priorities and ensure elements load only when idle or entering the viewport. This isolates hydration, allowing high-priority headers to interact immediately without waiting for lower-priority carousel scripts. For server-side processing, apply the server:defer directive to Astro components to create server islands, breaking up rendering into parallel areas. This enables aggressive caching of static shells while serving dynamic content asynchronously, preventing layout shifts via fallbacks. This approach works across any hosting infrastructure, ensuring fast-by-default performance by explicitly defining which components require browser execution and leaving the remainder as static HTML. Scope: Astro. Reviewed October 4, 2026.