astro · Astro Docs
Islands architecture
Explains the concept of Islands architecture in Astro, detailing how to hydrate specific interactive components within a static HTML framework to optimize performance.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Islands architecture
Explains the concept of Islands architecture in Astro, detailing how to hydrate specific interactive components within a static HTML framework to optimize performance.
When To Use
Use when you need to implement partial hydration to improve page load performance by isolating interactive components within a static site structure.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/islands-architecture-workflow-guide.md | An overview of the islands architecture pattern in Astro, covering its history, core concepts, and implementation of client islands. | Questions about an overview of the islands architecture pattern in Astro, covering its history, core concepts, and implementation of... |
examples/islands-architecture-astro-islands-architecture-react-component.text | A text representation of an Astro component demonstrating the usage of a React component within the islands architecture. | Exact payloads, commands, or snippets shown in A text representation of an Astro component demonstrating the usage of a React component within the islands architect... |
examples/islands-architecture-astro-islands-architecture-react-client-load.text | A code snippet demonstrating the use of the client:load directive to hydrate a React component within Astro's islands architecture. | Exact payloads, commands, or snippets shown in A code snippet demonstrating the use of the client:load directive to hydrate a React component within Astro's islands... |
examples/islands-architecture-astro-islands-architecture-server-defer-component.text | A code snippet demonstrating the use of the server:defer directive to implement islands architecture in an Astro component. | Exact payloads, commands, or snippets shown in A code snippet demonstrating the use of the server:defer directive to implement islands architecture in an Astro comp... |
What This Skill Covers
- Astro helped pioneer and popularize a new frontend architecture pattern called Islands Architecture. Islands architecture works by rendering the majority of...
- Main sections:
A brief history,What is an island?,Island components,Client Islands,Learn Astro with James Q Quick.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://docs.astro.build/en/concepts/islands