> React 공식 문서조차 "새로운 React 프로젝트를 시작할 때 Next.js를 사용하라"고 권장하는 시대가 되었습니다.<br>단순한 SSR 도구로 시작해, 이제는 **웹 개발의 모든 것(The React Framework for the Web)**이 된 Next.js의 A to Z를 아주 깊고 상세하게 파헤쳐 봅니다.

![Next.js Architecture](https://assets.vercel.com/image/upload/v1588805858/front/nextjs/blog/next-9-4/og.png)

# 1. Next.js란 무엇인가?

Next.js는 **Vercel**이 만든 React 기반의 풀스택 웹 프레임워크입니다.

### 🚨 React만으로는 부족했던 것들
React는 "UI를 만드는 라이브러리"입니다. 그 말은 즉, UI 외적인 부분은 개발자가 알아서 채워야 한다는 뜻입니다.
- **라우팅**: `react-router-dom`을 직접 설치하고 설정해야 함.
- **번들링**: Webpack, Babel 설정을 직접 만지거나 CRA의 블랙박스에 의존해야 함.
- **SEO (검색 엔진 최적화)**: SPA(Single Page Application) 특성상 초기 HTML이 비어있어 구글/네이버 봇이 내용을 못 읽음.
- **초기 로딩 속도**: 자바스크립트를 다 다운받기 전까지 화면이 하얗게 뜸.

Next.js는 이 모든 문제를 **"설정 없이(Zero Configuration)"** 해결해 줍니다. 개발자는 오직 비즈니스 로직에만 집중하면 됩니다.

# 2. 렌더링 패턴의 진화 (The Rendering Spectrum)

Next.js가 강력한 이유는 상황에 맞춰 렌더링 방식을 자유자재로 선택할 수 있다는 점입니다.

### 1️⃣ CSR (Client-Side Rendering)
- 기존 React 방식.
- 브라우저가 JS를 실행해야 화면이 보임.
- **용도**: 관리자 페이지, SEO가 필요 없는 비공개 대시보드.

### 2️⃣ SSR (Server-Side Rendering) - `getServerSideProps`
- 요청이 올 때마다 서버에서 HTML을 그려서 내려줌.
- **장점**: 항상 최신 데이터, 완벽한 SEO.
- **단점**: 서버 부하 증가, 응답 속도 느림.
- **용도**: 실시간 주식 차트, 개인화된 피드.

### 3️⃣ SSG (Static Site Generation) - `getStaticProps`
- **Next.js의 필살기 1**. 빌드 타임에 미리 HTML을 다 만들어둠.
- **장점**: 압도적인 속도 (CDN에서 바로 서빙).
- **단점**: 빌드 이후 데이터 변경 반영 불가.
- **용도**: 블로그, 회사 소개 페이지, 마케팅 랜딩 페이지.

### 4️⃣ ISR (Incremental Static Regeneration)
- **Next.js의 필살기 2**. SSG의 빠름 + SSR의 최신성.
- 빌드된 정적 페이지를 특정 주기(예: 60초)마다 백그라운드에서 새로 고침.
- **용도**: 이커머스 상품 상세 페이지 (가격이 가끔 바뀜).

# 3. Game Changer: App Router와 RSC

Next.js 13.4부터 안정화된 **App Router**는 패러다임을 완전히 바꿨습니다.

### ⚛️ RSC (React Server Components)
기존에는 컴포넌트가 클라이언트(브라우저)에서 실행됐지만, 이제는 **서버에서 실행**됩니다.

```tsx
// app/page.tsx (Server Component)
async function Page() {
  // 1. DB 직접 접근 가능 (API 안 만들어도 됨!)
  const data = await db.query('SELECT * FROM posts');

  // 2. 무거운 라이브러리(예: Markdown 파서)를 써도
  // 브라우저로 전송되는 번들 사이즈는 0kb입니다.
  return <div>{data.map(...)}</div>;
}
```

*   **Zero Bundle Size**: 서버 컴포넌트 코드는 브라우저로 전송되지 않습니다. 클라이언트가 다운로드해야 할 JS 양이 획기적으로 줄어듭니다.
*   **백엔드 로직 통합**: 프론트엔드 코드 안에서 DB 쿼리를 직접 날리는 것이 자연스러워졌습니다.

# 4. Next.js만의 강력한 최적화 도구들

프레임워크답게, 웹 성능을 높이는 도구들이 기본 내장되어 있습니다.

### 🖼️ Image Component (`<Image />`)
- 이미지를 WebP/AVIF로 자동 변환.
- 디바이스 크기에 맞춰 리사이징.
- Lazy Loading 자동 적용.
- **CLS(Cumulative Layout Shift)** 방지 (이미지 로딩되면서 레이아웃 덜컹거리는 현상 해결).

### 🔤 Font Optimization (`next/font`)
- 구글 폰트를 빌드 타임에 다운로드하여 호스팅.
- 브라우저가 구글 서버로 요청을 보내지 않아 프라이버시 이슈 해결 및 속도 향상.

### 📜 Script Optimization (`next/script`)
- 서드파티 스크립트(구글 애널리틱스, 광고 등)가 메인 스레드를 막지 않도록 로딩 우선순위를 제어(`strategy="lazyOnload"` 등).

# 5. 현재와 미래: 웹의 표준이 되다

### 📈 Vercel 생태계
Next.js의 개발사 Vercel은 프레임워크와 배포 플랫폼을 완벽하게 통합했습니다. `git push` 한 번이면 전 세계 Edge Network에 사이트가 배포되고, Serverless Function이 자동으로 생성됩니다. 이는 개발자 경험(DX)을 극대화했습니다.

### 🔮 미래: 풀스택의 대중화
과거에는 프론트엔드와 백엔드가 엄격히 분리되었지만, Next.js의 **Server Actions**와 **RSC**는 그 경계를 허물고 있습니다. 프론트엔드 개발자가 DB를 다루고, 백엔드 로직을 작성하는 것이 자연스러운 워크플로우가 되었습니다.

# 마치며

Next.js는 단순한 도구를 넘어, **"웹을 어떻게 만들어야 하는가"**에 대한 모범 답안을 제시하고 있습니다.

더 빠른 웹, 더 검색 잘 되는 사이트, 더 편한 개발 환경을 원한다면 선택이 아닌 필수입니다. 지금 당장 `npx create-next-app@latest`로 미래를 경험해 보세요. 🚀

Next.js: React의 한계를 넘어 웹의 표준이 되기까지 (CSR부터 RSC까지)

댓글 0