✅ Next.js의 CSR, SSR, ISR 차이점 완벽 정리

Next.js를 사용하는 이유 중 하나는 다양한 렌더링 방식을 상황에 맞게 선택할 수 있다는 점입니다.
면접에서 “CSR, SSR, ISR 차이점이 뭔가요?”라고 물으면, 장단점과 선택 기준까지 연결해서 답변하는 것이 중요합니다.
이번 글에서는 CSR, SSR, ISR 개념부터 실무 적용 사례까지 완벽하게 정리합니다.

📌 1. CSR (Client Side Rendering)

✅ 정의

**브라우저(Client)**가 JavaScript를 받아서 실행 후 화면을 렌더링하는 방식
HTML 파일에는 최소한의 구조만 있고, 브라우저가 JS를 해석해 실제 콘텐츠를 만듦

✅ 흐름

브라우저가 빈 HTML과 JS 파일 수신
JS가 실행되면서 데이터 fetch
최종적으로 화면에 렌더링

✅ 장점

초기 서버 부하 감소
사용자와의 상호작용이 빠름

✅ 단점

초기 로딩 지연 (백지 상태에서 JS 다운로드 → 실행)
SEO 최적화에 불리함 (검색 엔진이 콘텐츠를 못 읽을 수 있음)

✅ 사용 예시

로그인 후 내부 대시보드 화면
사용자 맞춤형 페이지 (로그인, 장바구니 등)

📌 2. SSR (Server Side Rendering)

✅ 정의

**서버(Server)**에서 HTML을 완성해서 브라우저에 전달하는 방식
사용자가 페이지 요청 시마다 서버가 HTML을 새로 생성

✅ 흐름

브라우저가 요청
서버가 데이터 fetch → HTML 완성 → 응답
브라우저가 완성된 HTML 렌더링

✅ 장점

SEO에 유리 (초기 HTML에 콘텐츠 포함)
초기 렌더링이 빠름

✅ 단점

서버 부하 증가
요청마다 서버가 매번 렌더링 → 트래픽 급증 시 속도 저하 가능

✅ 사용 예시

검색 엔진 최적화(SEO)가 중요한 블로그, 뉴스 사이트
마케팅용 랜딩 페이지

📌 3. ISR (Incremental Static Regeneration)

✅ 정의

**정적 사이트 생성(SSG)**의 확장 버전
빌드 타임이 아닌 런타임 중 특정 요청에 대해 정적 페이지를 갱신하는 방식

✅ 흐름

빌드 시 기본 정적 파일 생성
이후 특정 요청 발생 시 새로운 버전을 백그라운드에서 생성
설정한 주기(revalidate)마다 페이지 갱신

export async function getStaticProps() {
  return {
    props: { ... },
    revalidate: 60, // 60초마다 새로 빌드
  }
}

✅ 장점

초기 응답 속도 매우 빠름 (정적 파일)
데이터 변경도 일정 주기마다 반영 가능

✅ 단점

실시간성이 필요한 데이터에는 부적합
갱신 주기 내에 데이터 변경이 있을 경우 최신 데이터 반영 안 될 수 있음

✅ 사용 예시

제품 리스트 페이지 (자주 변경되지 않는 상품 정보)
블로그 포스트

📌 4. 정리: CSR, SSR, ISR 비교표

항목 CSR SSR ISR

HTML 생성 시점	브라우저에서	서버 요청마다	최초 빌드 + 주기적 갱신
초기 로딩 속도	느림	빠름	매우 빠름
SEO 최적화	불리	유리	유리
서버 부하	낮음	높음	낮음
실시간성	좋음	매우 좋음	보통

📌 5. 실무에서의 선택 기준

상황 추천 렌더링 방식

SEO 중요 + 빈번한 콘텐츠 변경	SSR
SEO 중요 + 변경 빈도 낮음	ISR
로그인/대시보드/개인화 페이지	CSR
마케팅/랜딩페이지	SSR 또는 ISR

📌 실무 경험 예시

🧪 문제

쇼핑몰 프로젝트에서 초기에는 CSR로 상품 목록을 렌더링했는데,
검색 엔진에 노출이 안 되고, 제품 노출 속도 이슈 발생.

✅ 해결

상품 리스트는 ISR로 변경 (정적 파일 생성 + 주기적 갱신)
상세 페이지는 SSR로 변경하여 상품별 SEO 강화
로그인 및 결제 페이지는 CSR 유지

→ SEO 점수 상승 + 사용자 경험 향상

📌 면접 시 이렇게 답하면 완벽

Next.js는 다양한 렌더링 방식을 제공합니다.
CSR은 클라이언트 렌더링에 적합하고, SSR은 SEO 최적화 및 빠른 초기 로딩에 유리하며, ISR은 SSG의 성능을 유지하면서 주기적 갱신이 필요한 페이지에 적합합니다.
실무에서는 각 페이지의 성격에 맞게 CSR, SSR, ISR을 적절히 조합하여 사용하고 있습니다.

Next.js,CSR,SSR,ISR,렌더링방식비교,프론트엔드면접,SEO최적화,정적사이트생성,서버사이드렌더링,Nextjs면접대비