CSR과 SSR 차이 완벽 정리 - Next.js 렌더링 방식 이해하기
CSR은 브라우저가 JavaScript로 화면을 그리고, SSR은 서버가 완성된 HTML을 전달하는 방식이다.
이 글은 웹 개발을 시작한 입문자와 Next.js를 처음 배우는 개발자를 대상으로 작성되었다. 렌더링 방식의 차이를 이해하면 어떤 서비스에 어떤 방식을 적용해야 할지 올바른 판단을 내릴 수 있다.
CSR이란 무엇인가?
CSR(Client Side Rendering, 클라이언트 사이드 렌더링)은 서버가 비어 있는 HTML 파일과 JavaScript 번들을 전달하고, 브라우저(클라이언트)가 JavaScript를 실행해 화면을 만드는 방식이다.
동작 순서:
- 서버가 거의 비어있는 HTML 파일을 전송한다
- 브라우저가 JavaScript 파일을 다운로드한다
- JavaScript 실행 후 API에서 데이터를 가져온다
- 데이터를 받아 화면(DOM)을 완성한다
React로 만든 기본 SPA가 CSR 방식이다. 처음 접속하면 <div id="root"></div> 하나만 있는 HTML을 받아오고, 이후 JavaScript가 실행되면서 화면을 채운다.
SSR이란 무엇인가?
SSR(Server Side Rendering, 서버 사이드 렌더링)은 사용자가 페이지를 요청할 때마다 서버가 필요한 데이터를 가져와 HTML을 완성하고, 완성된 HTML을 브라우저에 전달하는 방식이다.
동작 순서:
- 사용자가 페이지를 요청한다
- 서버가 데이터베이스 또는 API에서 데이터를 가져온다
- 서버가 데이터를 채운 완성된 HTML을 생성한다
- 브라우저가 완성된 HTML을 받아 즉시 표시한다
SSR은 검색엔진이 완성된 HTML을 받기 때문에 SEO에 유리하고, 사용자는 빠르게 첫 화면을 볼 수 있다.
CSR vs SSR 비교표
| 구분 | CSR | SSR |
|---|---|---|
| HTML 생성 위치 | 브라우저 | 서버 |
| 초기 로딩 속도 | 느림 | 빠름 |
| 페이지 전환 속도 | 빠름 | 느림 |
| SEO | 불리 | 유리 |
| 서버 부하 | 낮음 | 높음 |
| 사용자 경험 | 앱 같은 느낌 | 전통적 웹 |
| 적합한 서비스 | 대시보드, B2B 앱 | 블로그, 쇼핑몰, 뉴스 |
Next.js의 4가지 렌더링 방식
Next.js는 하나의 프레임워크 안에서 4가지 렌더링 방식을 모두 지원한다.
1. CSR (Client Side Rendering)
'use client'디렉티브를 사용하거나useEffect로 데이터를 가져올 때- 인증된 사용자만 보는 대시보드, 빈번한 데이터 업데이트에 적합
2. SSR (Server Side Rendering)
- 요청마다 서버에서 HTML을 생성
- Next.js 13+ App Router에서는 기본적으로 서버 컴포넌트가 SSR처럼 동작
- 사용자별 맞춤 데이터가 필요한 페이지에 적합
3. SSG (Static Site Generation, 정적 사이트 생성)
- 빌드 시점에 HTML을 미리 생성
- 블로그, 문서 사이트, 마케팅 페이지처럼 내용이 자주 변하지 않는 곳에 적합
- 가장 빠른 응답 속도 제공
4. ISR (Incremental Static Regeneration, 점진적 정적 재생성)
- SSG로 미리 생성한 페이지를 일정 시간(revalidate)마다 자동으로 재생성
- 쇼핑몰 상품 페이지처럼 가끔 바뀌는 콘텐츠에 적합
SEO 관점에서의 선택
Google이 2025년에도 권장하는 SEO 최적 렌더링 방식은 SSR 또는 SSG다. 이는 검색엔진 크롤러가 완성된 HTML 콘텐츠를 즉시 파악할 수 있기 때문이다.
2025년 기준 Google의 크롤러(Googlebot)는 JavaScript를 실행하여 CSR 페이지도 인덱싱할 수 있지만, 이 과정에 지연이 발생할 수 있다. 따라서 SEO가 중요한 서비스라면 SSR이나 SSG를 사용하는 것이 안전하다.
어떤 방식을 선택해야 할까?
선택 기준을 정리하면 다음과 같다:
- 블로그, 뉴스, 쇼핑몰: SSG 또는 ISR (SEO 중요, 빠른 응답 필요)
- 관리자 대시보드, B2B 앱: CSR (SEO 불필요, 실시간 데이터 필요)
- 실시간 사용자 맞춤 페이지: SSR (로그인 상태, 개인화 필요)
- 대부분의 프로덕션 서비스: 페이지마다 혼합 사용 (하이브리드)
따라서 현재 웹 개발 표준은 순수 CSR이나 순수 SSR보다 Next.js처럼 페이지마다 최적의 렌더링 방식을 선택하는 하이브리드 방식이다.
자주 묻는 질문 (FAQ)
Q1. React는 무조건 CSR인가요? A. 기본 React(Create React App)는 CSR이다. 그러나 Next.js를 사용하면 React로도 SSR, SSG, ISR을 모두 사용할 수 있다.
Q2. SSR은 서버 비용이 더 많이 드나요? A. 그렇다. SSR은 요청마다 서버에서 HTML을 생성해야 하므로 서버 부하가 더 크다. 반면 SSG는 미리 만들어진 HTML을 CDN에서 서빙하므로 서버 비용이 최소화된다.
Q3. Next.js 13 App Router에서 CSR을 사용하려면 어떻게 하나요?
A. 컴포넌트 상단에 'use client'를 추가하면 클라이언트 컴포넌트가 된다. useState, useEffect 등 브라우저 API를 사용하는 컴포넌트에는 필수다.
Q4. ISR의 revalidate 시간은 어떻게 설정하나요?
A. fetch() 함수에 { next: { revalidate: 3600 } } 옵션을 추가하면 1시간마다 재생성된다. 또는 Route Segment Config에서 export const revalidate = 3600으로 설정한다.
Q5. SSG로 만든 페이지는 매번 빌드해야 하나요? A. ISR을 사용하면 전체 빌드 없이도 특정 시간마다 페이지를 자동으로 재생성할 수 있다. 쇼핑몰처럼 상품이 자주 바뀌는 경우에 유용하다.