Headless CMS & Modern Web Architecture

하이드레이션

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.

Business applications and impact#

Connects fast initial rendering with functional client-side interactions.

Implementation guidance and considerations#

Split JavaScript bundles to reduce hydration delays and their effects on responsiveness, INP and TBT.

Islands Architecture

아일랜드 아키텍처

Rendering interactive parts of a static page as independent components.

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.