Next.js 14+ 소개와 렌더링의 진화
React 생태계의 패러다임은 끊임없이 진화해왔습니다. 과거 브라우저에서 모든 것을 그리는 CSR(클라이언트 사이드 렌더링)에서 시작하여, SEO와 초기 로딩 속도 개선을 위해 서버에서 페이지를 미리 그리는 SSR/SSG(서버 사이드 렌더링)를 거쳐, 마침내 Next.js 14+의 App Router라는 혁명적인 컴포넌트 단위 렌더링 모델에 도달했습니다.
Next.js 14 App Router의 핵심 특징
- React Server Components (RSC) 기본화: 모든 컴포넌트가 서버에서 먼저 렌더링되며, 필요한 상호작용만 클라이언트로 넘깁니다.
- 스트리밍(Streaming) 렌더링: 페이지 전체가 준비될 때까지 기다리지 않고, 준비된 HTML 조각부터 브라우저로 즉시 쏴줍니다. (
Suspense활용) - 고도화된 캐싱 시스템: 컴포넌트 단계, 데이터 요청 단계에서 강력한 내장 캐시가 작동하여 압도적인 성능을 냅니다.
// ==========================================
// 📂 app/page.tsx
// 서버 컴포넌트 기반의 아주 단순한 앱 라우터 예제
// ==========================================
export default async function HomePage() {
// 컴포넌트 함수 자체에 async를 붙일 수 있습니다! (서버 컴포넌트의 특권)
// 렌더링 진화의 꽃: 별도의 getServerSideProps 함수가 필요 없어졌습니다.
return (
<main className="min-h-screen p-8 bg-gray-50 flex flex-col items-center justify-center">
<h1 className="text-4xl font-extrabold text-blue-600 mb-4">
Welcome to Next.js 14+
</h1>
<p className="text-lg text-gray-700">
서버 컴포넌트 기반의 App Router 패러다임에 오신 것을 환영합니다!
</p>
</main>
);
}