Next.js 최적화 전략 완벽 가이드: SSR, SSG, ISR 제대로 활용하기

🚀 Next.js 기반 프로젝트 최적화 전략
SSR, SSG, ISR 실전 활용 가이드

Next.js는 React 생태계에서 가장 많이 사용되는 프레임워크 중 하나입니다. 기본적으로 서버사이드 렌더링(SSR)을 지원하고, 정적 사이트 생성(SSG), 점진적 정적 생성(ISR), 클라이언트 렌더링(CSR)까지 다양한 렌더링 전략을 조합할 수 있다는 것이 가장 큰 장점이죠.

이번 글에서는 중급 React 개발자를 대상으로, Next.js에서 성능과 유지보수 모두를 고려한 렌더링 전략의 실전 최적화 방법을 정리해보겠습니다.

---

🎯 Next.js 렌더링 방식 한눈에 정리

방식	특징	언제 사용?
SSR (getServerSideProps)	요청 시 서버에서 HTML 생성	로그인 필요, 매번 최신 데이터 필요
SSG (getStaticProps)	빌드 시 정적 HTML 생성	마케팅 페이지, 블로그, 가격표 등
ISR (Incremental Static Regeneration)	정적 생성 + 일정 주기로 재생성	블로그 목록, 제품 상세 등
CSR (useEffect, SWR)	브라우저에서 클라이언트 렌더링	비동기 로딩, 사용자 기반 콘텐츠

---

🧠 SSR vs SSG vs ISR: 언제 무엇을 써야 할까?

1. SSR (Server-Side Rendering)

getServerSideProps를 사용하는 방식이며, 매 요청마다 HTML을 서버에서 생성합니다. SEO와 실시간 데이터 제공에 적합합니다.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

• 🟢 장점: 사용자마다 다른 콘텐츠, 최신 데이터, SEO 우수
• 🔴 단점: 요청마다 서버 부하, 느린 응답 속도

💡 추천 상황: 로그인/인증 페이지, 대시보드 등

2. SSG (Static Site Generation)

getStaticProps를 사용하며 빌드 시 HTML 생성. 성능이 뛰어나고 캐싱에 유리합니다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const data = await res.json();
  return { props: { data } };
}

• 🟢 장점: 매우 빠름, 서버 부하 없음, SEO 우수
• 🔴 단점: 실시간 변경 반영 어려움

💡 추천 상황: 마케팅 페이지, 회사 소개, 블로그 등

3. ISR (Incremental Static Regeneration)

SSG처럼 동작하지만 일정 시간마다 자동으로 페이지를 재생성합니다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 60, // 60초마다 갱신
  };
}

• 🟢 장점: 정적 페이지의 빠름 + 실시간 유사 반영
• 🔴 단점: 짧은 재생성 간격 시 부하 발생, 구버전 노출 가능성

💡 추천 상황: 뉴스/블로그 목록, 상품 정보 등

4. CSR (Client-Side Rendering)

브라우저에서 데이터 fetch. 초기에는 로딩 화면을 보여줍니다.

import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());

export default function Page() {
  const { data, error } = useSWR('/api/user', fetcher);
  if (!data) return <p>로딩 중...</p>;
  return <p>{data.name}</p>;
}

• 🟢 장점: 비동기 요청, 사용자 기반 대응
• 🔴 단점: 초기 콘텐츠 없음 (SEO 불리)

💡 추천 상황: 마이페이지, 대시보드, 검색 결과 등

---

⚙️ 렌더링 전략 조합 예시

페이지 종류	전략	설명
홈, 소개	SSG	SEO + 빠른 응답 속도
로그인, 마이페이지	SSR	사용자별 콘텐츠 대응
상품 리스트	ISR	주기적 갱신 + 성능
대시보드	CSR	인터랙션 중심

---

📦 추가 최적화 전략들

1. 이미지 최적화 (next/image)

• Lazy loading
• WebP 자동 변환
• CDN 캐싱

import Image from 'next/image';
<Image src="/hero.png" alt="Hero" width={800} height={500} />

2. Dynamic Import (코드 스플리팅)

import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false,
  loading: () => <p>로딩 중...</p>
});

3. Prefetching & Preloading

import Link from 'next/link';
<Link href="/about">About 페이지</Link>

4. API 경량화

• 필요한 데이터만 전달
• GraphQL 또는 API Slice 구조 활용

5. 환경별 캐싱 전략 분리

• .env.local, .env.production 구분
• Cache-Control 헤더로 CDN 캐싱 조절

---

📈 Lighthouse로 성능 진단

• FCP, LCP, CLS 지표 체크
• 이미지 최적화 여부 확인
• 불필요한 스크립트 제거 또는 next/script 지연 처리

---

✅ 마무리 요약

Next.js 프로젝트에서는 단순히 성능 향상만이 아닌, 운영 환경과 유지보수까지 고려한 렌더링 전략이 필요합니다.

• SSR: 로그인/사용자별 페이지
• SSG: 정적 콘텐츠 중심 페이지
• ISR: 자주 갱신되지만 최신성이 덜 중요한 콘텐츠
• CSR: 사용자 기반 대화형 UI

렌더링 전략을 유연하게 조합해서 사용하면, 성능과 사용자 경험 모두를 만족시키는 앱을 만들 수 있습니다.

---