Next.js의 CSR, SSR, SSG, ISR 차이와 최적화 전략
한 줄 답변
Next.js 렌더링 핵심은 '데이터 업데이트 빈도'와 'SEO 필요성'에 따른 선택입니다. 정적 데이터는 SSG/ISR로 빌드 타임에, 동적 데이터는 CSR/SSR로 처리하여 성능과 경험을 동시에 확보해야 합니다.
핵심 개념 정리
웹 개발에서 렌더링 전략의 진화는 성능과 사용자 경험(UX), 그리고 검색 엔진 최적화(SEO) 사이의 균형을 찾아가는 과정입니다. 과거의 웹이 서버에서 모든 HTML을 그려내는 단순 SSR 방식이었다면, 모바일 기기의 발전과 함께 브라우저가 주도권을 갖는 CSR 시대를 거쳤습니다. 현재 Next.js와 같은 프레임워크는 이 모든 방식을 페이지 혹은 컴포넌트 단위로 유연하게 선택할 수 있는 하이브리드 환경을 제공합니다.
정적 생성 방식인 SSG와 ISR은 빌드 시점에 HTML을 미리 생성하여 CDN 캐싱을 극대화합니다. 특히 ISR(Incremental Static Regeneration)은 정적 페이지의 장점을 유지하면서도 데이터가 변경될 때 전체 재빌드 없이 특정 주기(revalidate)마다 백그라운드에서 페이지를 갱신할 수 있어, 수만 개의 상품 페이지가 있는 커머스나 블로그 서비스에서 서버 부하를 최소화하며 최신 정보를 유지하는 핵심 기술로 자리 잡았습니다.
반면, SSR(Server Side Rendering)과 CSR(Client Side Rendering)은 실시간성이 중요한 환경에서 빛을 발합니다. SSR은 매 요청마다 서버에서 렌더링하여 최신 상태를 보장하지만 서버 자원을 소모하며, CSR은 초기 로딩 이후의 빠른 인터랙션에 유리합니다. 시니어 개발자는 단순히 방식을 아는 것을 넘어, TTI(Time to Interactive)와 Hydration 비용을 고려하여 언제 어떤 방식을 조합할지 결정하는 아키텍처 설계 능력이 필요합니다.
비교 정리
| 항목 | 정적 렌더링 (SSG/ISR) | 동적 렌더링 (SSR/CSR) |
|---|---|---|
| 렌더링 시점 | 빌드 타임 혹은 백그라운드 주기적 생성 | 사용자 요청 시 혹은 브라우저 런타임 |
| 사용자 경험 (FCP) | 매우 빠름 (정적 HTML 즉시 응답) | 보통 (서버 연산 혹은 JS 로드 시간 필요) |
| 데이터 실시간성 | 설정 주기에 따른 주기적 업데이트 | 즉각적인 최신 데이터 반영 가능 |
| 서버 리소스 비용 | 낮음 (CDN 캐싱 및 정적 서빙) | 높음 (매 요청마다 렌더링 연산 수행) |
면접에서 이렇게 답하세요
단순히 정의를 나열하기보다 '트레이드오프' 관점에서 답변하세요. 예를 들어 커머스 서비스라면 상품 상세 페이지는 SEO와 성능을 위해 ISR을 사용하고, 개인화된 장바구니는 CSR로 처리하여 서버 비용을 절감한다는 구체적 시나리오를 제시하는 것이 좋습니다. 또한 Next.js 13+의 App Router와 Server Components 개념을 곁들여 최신 트렌드 숙지 여부를 어필하면 확실한 차별화 포인트가 됩니다.
자주 묻는 추가 질문
Q. ISR에서 revalidate 주기를 0으로 설정하면 SSR과 동일한가요?
아니요. 여전히 정적 생성을 시도하지만 매 요청마다 재생성을 트리거합니다. 하지만 SSR처럼 런타임 데이터에 즉각 반응하는 것과는 캐싱 레이어와 서버 부하 면에서 차이가 있습니다.
Q. Hydration 에러의 주요 원인과 해결 방법은 무엇인가요?
서버와 클라이언트의 초기 렌더링 결과가 다를 때 발생합니다. window 객체 접근이나 랜덤 함수 사용을 지양하고, 브라우저 전용 로직은 useEffect 내에서 실행하여 일관성을 유지해야 합니다.
Q. SEO가 전혀 필요 없는 대시보드 서비스라면 어떤 전략이 좋을까요?
서버 자원 낭비를 줄이기 위해 전적으로 CSR을 채택하거나, 초기 셸(Shell) 구조만 정적으로 생성하고 데이터는 클라이언트에서 페칭하는 방식이 유지보수와 비용 측면에서 효율적입니다.
커뮤니티 하이라이트
“실무에서는 트래픽이 몰릴 때 SSR 서버가 터지는 경우가 많습니다. 가능한 모든 페이지를 ISR로 설계하고 엣지 캐싱을 활용하는 능력이 시니어의 실력입니다.”
“App Router 도입 후에는 페이지 단위가 아닌 컴포넌트 단위로 RSC와 Client Component를 나누는 설계가 더 중요해졌습니다. 렌더링 경계 설정에 집중하세요.”
42명의 개발자가 이 질문에 참여했습니다
관련 면접 질문
앱에서 직접 답변해보세요
매일 3개의 면접 질문에 답변하고,
다른 개발자들의 답변을 비교해보세요.