What is Islands Architecture?
Turkish: Ada Mimarisi (Islands Architecture)
Islands architecture keeps most of a page as static HTML and hydrates only the interactive UI sections as separate islands.
What is Islands Architecture?
Islands architecture keeps most of the page as fast-loading static HTML. Only components that need interaction, such as a search box, cart summary, or filter panel, become interactive with browser-side JavaScript.
Each interactive part is treated like a separate island. Instead of turning the full page into a single SPA, static content and dynamic components are clearly separated.
How It Works
Astro is one of the frameworks that popularized this architecture. A page produces HTML by default, and the developer defines hydration rules only for specific components. For example, a price calculator can load immediately, while a comments area can load when it becomes visible.
Islands architecture works well with SSG because content pages can be generated ahead of time. Hydration happens only where interaction is actually needed.
Business Use
Corporate websites, documentation, blogs, product catalogs, and marketing pages are strong candidates for islands architecture. Users get a fast first load while tools and forms remain interactive where needed.
Good design starts by asking whether each component truly needs JavaScript in the browser.
Related Terms
Astro is a web framework for content-heavy sites that ships HTML first and loads JavaScript only where interaction needs it.
HydrationHydration attaches browser-side JavaScript behavior to server-rendered HTML so a static interface becomes interactive.
QwikQwik is a web framework that resumes application state from HTML and loads JavaScript on demand for fast startup.
SSG (Static Site Generation)SSG prebuilds pages into HTML during deployment, creating fast, cache-friendly sites that need little server work per request.