Headless CMS & Modern Web Architecture

아일랜드 아키텍처

Rather than hydrating one application for the entire page, islands architecture bootstraps only components such as search inputs and carousels. The remaining static content, often more than 90% of a page, stays as HTML, significantly reducing initial JavaScript execution and supporting better INP. Independent islands that need shared state, such as a shopping-cart count, may require a lightweight event or state layer such as nanostores.

Business applications and impact#

Reduces initial JavaScript work and improves TBT and INP.

Implementation guidance and considerations#

Use a lightweight event or state layer when islands must share global state.

Hydration

하이드레이션

Attaching client-side event listeners and state to server-rendered HTML to make it interactive.

Decoupled Architecture

디커플드 아키텍처

A software architecture in which independent back-end and front-end layers communicate exclusively through APIs.

Static Site Generation

SSG (정적 사이트 생성)

Generating pre-rendered HTML, CSS and JavaScript as static files at build time.

Server-Side Rendering

SSR (서버 사이드 렌더링)

Generating HTML dynamically on the server for each incoming request and delivering it to the browser.