AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

Next.js 렌더링 패턴

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • *프론트엔드 개발자 및 Next.js 프레임워크 사용자**
  • 난이도: 중간 (렌더링 전략 선택, 성능 최적화 이해 필요)*

핵심 요약

  • Static Site Generation (SSG): getStaticProps() 사용, 정적 파일 생성으로 최고 성능 및 SEO 우수
  • Server-Side Rendering (SSR): getServerSideProps() 사용, 실시간 데이터 제공, 서버 부하 증가
  • Incremental Static Regeneration (ISR): revalidate 옵션 사용, 정적 속도 + 실시간 데이터 결합, 정기적 업데이트 지원
  • Client-Side Rendering (CSR): 사용자 맞춤형 콘텐츠 지원, SEO 비효율

섹션별 세부 요약

1. 개요

  • Next.js는 React 기반의 프레임워크로, 빠른 성능, SEO 최적화, 확장성 제공
  • 지원하는 렌더링 패턴: SSG, CSR, SSR, ISR
  • 예시: 과일 쇼핑몰 웹사이트를 통해 각 패턴의 사용 시기 설명

2. SSG (Static Site Generation)

  • 빌드 시간에 HTML 생성
  • 정적 콘텐츠 (홈페이지, 블로그, 문서)에 적합
  • 예시 코드:

```js

export async function getStaticProps() {

return { props: { message: "Welcome to the Fruit Shop!" } };

}

```

  • 장점: 빠른 로딩, SEO 우수
  • 단점: 업데이트 시 재빌드 필요

3. CSR (Client-Side Rendering)

  • 브라우저에서 데이터 요청 후 렌더링
  • 사용자 맞춤형 페이지 (대시보드, 프로필)에 적합
  • 예시 코드:

```js

useEffect(() => { fetch('/api/orders')... });

```

  • 장점: 동적 콘텐츠 지원
  • 단점: 초기 로딩 느림, SEO 비효율

4. SSR (Server-Side Rendering)

  • 서버에서 요청 시마다 HTML 생성
  • 실시간 데이터 (뉴스, 가격 정보)에 적합
  • 예시 코드:

```js

export async function getServerSideProps() {

const res = await fetch('...');

return { props: { news: res.json() } };

}

```

  • 장점: 최신 데이터 제공, SEO 우수
  • 단점: 서버 부하 증가

5. ISR (Incremental Static Regeneration)

  • SSG + SSR의 혼합: 정적 파일 생성 후 주기적 재생성
  • 정기적으로 업데이트되는 콘텐츠 (제품 페이지, 마케팅 정보)에 적합
  • 예시 코드:

```js

return { props: { banana }, revalidate: 3600 }; // 1시간마다 재생성

```

  • 장점: 정적 속도 + 실시간 데이터
  • 단점: 재생성 간 잠시 데이터가 오래됨

6. 패턴 비교

| 패턴 | 신선도 | 속도 | 서버 부하 | 최적 사용 사례 |

|------|--------|------|-----------|----------------|

| SSG | ❌ 고정 | ✅ 빠름 | ✅ 낮음 | 정적 페이지 (홈페이지) |

| CSR | ✅ 클라이언트 | ❌ 느림 | ✅ 낮음 | 사용자 대시보드 |

| SSR | ✅ 실시간 | ❌ 느림 | ❌ 높음 | 실시간 데이터 (뉴스) |

| ISR | ✅ 주기적 | ✅ 빠름 | ✅ 중간 | 제품 페이지 (과일 상세 정보) |

결론

  • Next.jsSSG, SSR, ISR, CSR을 혼합하여 사용할 수 있어 성능, SEO, 확장성을 동시에 최적화 가능
  • 홈페이지: SSG, 대시보드: CSR, 뉴스: SSR, 제품 페이지: ISR
  • 프로젝트 시작:

```bash

npx create-next-app@latest my-fruit-shop

npm run dev

```

  • 배포: npm run build && npm run start 명령어 사용
  • 핵심 팁: 렌더링 전략 선택 시 콘텐츠 특성과 성능, SEO 요구사항을 반드시 고려해야 함