134
islands architecture
The page is static HTML. Small interactive regions hydrate. The article is not a client app.
What is islands architecture?
Islands keep most of the page as HTML and hydrate only the widgets that need events: a search box, a cart button. The document does not boot a framework to render a paragraph.
Why does islands architecture matter when vibe coding?
Models reach for a single-page app for a marketing page plus one form. The paragraph becomes a component. Say islands or the whole page becomes JS.
How do you do islands architecture?
Default the route to static HTML. Mark the one widget as an island with a named client directive. Do not pass the whole data tree into it.
How do you ask a model for islands architecture?
Render (page) as static HTML. Hydrate only (widget) as an island. Do not turn the page into a client-rendered app. Do not import the widget from the static layout in a way that pulls it into every page.
What goes wrong with islands architecture?
An island that receives the entire page as props. You shipped the data twice and hydrated a continent.