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.js는 SSG, 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 요구사항을 반드시 고려해야 함