Islands Architecture
아일랜드 아키텍처
Rendering interactive parts of a static page as independent components.
Attaching client-side event listeners and state to server-rendered HTML to make it interactive. Explore its purpose and practical applications.
하이드레이션
Hydration reruns the component tree in the browser to attach state and event listeners to HTML rendered by the server. Until it finishes, a visible button may not respond, creating the impression that the page is frozen. Astro’s islands architecture and React 18 selective hydration are examples of approaches designed to reduce this gap between visible content and usable interactions.
Connects fast initial rendering with functional client-side interactions.
Split JavaScript bundles to reduce hydration delays and their effects on responsiveness, INP and TBT.
아일랜드 아키텍처
Rendering interactive parts of a static page as independent components.
헤드리스 CMS
An architecture that separates content management from the front-end interface and delivers content through APIs.
디커플드 아키텍처
A software architecture in which independent back-end and front-end layers communicate exclusively through APIs.
잼스택
A web architecture built on client-side JavaScript, reusable APIs and pre-rendered markup.
SSG (정적 사이트 생성)
Generating pre-rendered HTML, CSS and JavaScript as static files at build time.
SSR (서버 사이드 렌더링)
Generating HTML dynamically on the server for each incoming request and delivering it to the browser.