islands architecture
Islands architecture adds interactive components to an otherwise server-rendered or static page.
Use this when Only a small part of a content page needs JavaScript.
without the term
“It's a blog post page, only the search filter needs to be interactive, but we're shipping the whole React app for it. Can we make only that one widget use JavaScript?”
with the term · How do you ask a model for islands architecture?
Render this content page with an interactive island for the filter. Verify the article works before hydration and unrelated pages do not load the widget.
What is islands architecture?
The page is static HTML except for a few marked components that load JavaScript and hydrate on their own. Content that doesn't need JavaScript ships none.
Why does islands architecture matter when vibe coding?
Making the whole page interactive can ship unnecessary code and data.
How do you do islands architecture?
Keep static content outside client boundaries and hydrate only the widgets that need it.
What goes wrong with islands architecture?
Passing the whole document into an island when it only needs a small input.