Next.js : SSR인지 CSR인지 구분하는 방법

 

Next.js는 Node.js 위에서 실행되는 프레임워크로 내부 엔진이 Node.js라고 보면된다.

즉, Next.js = Node.js 서버 애플리케이션이라고 보면된다.

(Next.js = Node.js + React + Routing + API Routes + SSR엔진)

 

SSR인지 CSR인지 구분하기에 앞서

우선 SSR인지 뭔지 CSR이 뭔지 정확하게 아는 것이 필요하다.

SSR(Server-Side Rendering)

Server-Side Rendering = 서버에서 페이지를 렌더링해서 HTML을 클라이언트(브라우저)로 전달

 

동작 방식을 보면,

 

1. 브라우저가 URL 요청 -> → Next.js 서버로 요청

2.  Next.js  서버가 React 컴포넌트 실행 -> HTML 생성

3. ️ HTML + minimal JS → 브라우저 전달

4. 브라우저는 받은 HTML을 바로 화면에 렌더링

5. 추가로 React hydrate -> 인터랙션 활성

 

CSR(Client-Side Rendering)

Client-Side Rendering = 서버는 정적 파일(JS, HTML, CSS)만 전달 → 브라우저에서 React가 실행 + 렌더링

 

동작 방식을 보면,

1. 브라우저가 Next.js 서버에서 static HTML + JS bundle 다운로드

2. React 앱을 브라우저에서 직접 실행 -> 페이지 렌더링

3. 이후 모든 라우팅, 데이터 패칭은 브라우저에서 처리

 

 

SSR인지 CSR인지 구분하는 방법

상황	SSR	설명
브라우저에서 URL 직접 입력	✅ SSR	서버로 페이지 요청 → Next.js 서버에서 React 렌더
브라우저 F5 새로고침	✅ SSR	서버로 페이지 요청 → SSR
getServerSideProps 사용 페이지	✅ SSR	Next.js 서버에서 React + data fetch + HTML 생성
app 폴더의 async Server Component 사용	✅ SSR	Server Component는 SSR
브라우저에서 router.push(), Link 사용	❌ CSR	클라이언트에서 SPA 라우팅 → 서버 호출 없음
useEffect, useQuery 등 client-side fetching	❌ CSR	브라우저에서만 실행
next export로 빌드된 static 사이트	❌ CSR	HTML + JS 정적파일 → 서버 실행 없음

 

서버로 페이지 요청 → SSR
클라이언트에서 React Router로 이동 → CSR