헤드리스 CMS
Headless Content Management System
콘텐츠 관리 백엔드와 프론트엔드 UI를 분리하고 API를 통해 콘텐츠를 서빙하는 아키텍처
Next.js는 React 기반 풀스택 프레임워크입니다. SSG, SSR, ISR과 RSC를 지원해 서비스 특성에 맞는 렌더링 구조를 설계할 수 있습니다. 상세 설명을 통해 개념의 작동 원리와 실무 적용 방법, 구현 시 주의사항을 확인하세요.
Next.js
Next.js는 Vercel이 관리하는 React 메타프레임워크로, 같은 프로젝트 안에서 페이지별로 SSG·SSR·ISR을 자유롭게 선택할 수 있는 유연성이 최대 강점이며, generateMetadata 함수와 자동 sitemap/robots 생성 기능으로 SEO 기본기를 프레임워크 차원에서 지원한다. App Router 도입 이후 React Server Components를 기본값으로 채택해 클라이언트로 전송되는 자바스크립트 양을 크게 줄였다. 다만 클라이언트 컴포넌트를 무분별하게 남용하면 여전히 번들이 비대해질 수 있어 use client 경계를 신중히 설계해야 한다.
generateMetadata 등 강력한 내장 SEO 기능과 sitemap 자동 생성 제공
클라이언트 번들 크기 관리 실패 시 로딩 속도 저하 주의
Headless Content Management System
콘텐츠 관리 백엔드와 프론트엔드 UI를 분리하고 API를 통해 콘텐츠를 서빙하는 아키텍처
Decoupled Architecture
백엔드와 프론트엔드가 독립된 레이어로 분리되어 API로만 통신하는 소프트웨어 구조
JavaScript APIs and Markup
클라이언트 JS와 재사용 API 및 사전 빌드된 마크업으로 웹을 구성하는 아키텍처
Static Site Generation
빌드 타임에 모든 페이지의 HTML CSS JS를 미리 렌더링해 정적 파일로 생성하는 방식
Server-Side Rendering
요청이 들어올 때마다 서버에서 동적으로 HTML을 실시간 생성하여 브라우저에 전달하는 방식
Incremental Static Regeneration
전체 사이트를 다시 빌드하지 않고 백그라운드에서 특정 정적 페이지만 주기적으로 재생성하는 기법