데브허브 | DEVHUB | Next.js CSR vs SSR vs SSG vs ISR and now PPR!Next.js CSR vs SSR vs SSG vs ISR and now PPR!
- Next.js는 CSR, SSR, SSG, ISR, PPR 등 다양한 렌더링 전략을 제공하여 성능과 사용자 경험을 최적화합니다. 🚀
- Next.js는 클라이언트 컴포넌트(브라우저에서 실행, 상호작용,
use client)와 서버 컴포넌트(서버에서 실행, 기본값, 데이터 페칭, ORM 사용)를 구분합니다. 💻↔️🌐
- CSR(클라이언트 사이드 렌더링)은 전통적인 React 방식으로, 앱 전체가 사용자 브라우저에서 렌더링되며 고도로 상호작용적인 부분에 적합합니다. 🖱️
- SSR(서버 사이드 렌더링)은 컴포넌트가 서버에서 렌더링되어 미리 계산된 HTML을 클라이언트에 전송하며, 직접적인 데이터 페칭과 서버 측 로직을 가능하게 합니다. ⚙️
- SSG(정적 사이트 생성)는 빌드 시점에 페이지를 한 번 미리 렌더링하여 정적 HTML 파일을 생성하고, 이를 빠르게 효율적으로 제공하여 변경되지 않는 콘텐츠에 이상적입니다. 🏗️
- Next.js 페이지는 URL
params나 searchParams와 같은 런타임 의존 정보가 없는 한, 기본적으로 빌드 시점에 정적으로 생성됩니다. ⏳
- 런타임 요청 정보(예: URL의
params)에 의존하는 페이지는 빌드 시점에 정적으로 생성되지 않고, 요청 시점에 동적으로 렌더링됩니다. 🔄