Next.js 렌더링 완전 정복! CSR·SSR·SSG·ISR을 카페 배달로 쉽게 이해하기
Next.js 렌더링 이해하기: CSR, SPA, SSR, SSG, ISR을 카페 배달로 비유해보자!
Next.js는 프론트엔드 개발자 사이에서 정말 핫한 프레임워크예요.
이유는 단순해요. 여러 가지 렌더링 방식을 상황에 맞게 섞어 쓸 수 있기 때문이죠.
그런데 개발 공부를 하다 보면 CSR, SSR, SSG, ISR… 이런 약어들이 정말 헷갈리잖아요?
그래서 오늘은 카페 배달 서비스로 비유해보려고 해요.
혹시 커피 좋아하시나요? 좋아하신다면 이 비유가 더욱 쏙쏙 들어올 거예요. ☕
SPA (Single Page Application)
→ 내가 직접 카페 가서 커피 사오는 것
- 한 번 카페에 입장(페이지 로딩)하면, 그 안에서 메뉴만 바꿔가며 커피를 고릅니다.
- 화면 전환은 정말 빠르지만, 처음 입장할 때 시간이 조금 걸릴 수 있어요.
- 웹사이트의 메뉴가 자주 바뀌지 않거나, SEO가 크게 중요하지 않을 때 좋습니다.
예시: React, Vue, Angular 앱
CSR (Client Side Rendering)
→ 카페 앱으로 주문 → 바리스타가 커피 제조 → 완성되면 배달
- 처음엔 “앱만” 다운로드하고, 커피(화면)는 내 브라우저에서 직접 만들어냅니다.
- 장점: 페이지 간 전환 속도가 빠르고, 사용자 경험이 부드러움
- 단점: 처음 앱을 실행할 때 로딩이 느릴 수 있고, 검색 엔진이 내용을 못 볼 수 있음
비유
→ 앱으로 메뉴부터 결제까지 다 해결. 하지만 커피가 오기 전까진 손에 아무것도 없어 불안할 수 있음.
SSR (Server Side Rendering)
→ 카페에서 커피를 미리 만들어서 배달해 주는 것
- 사용자가 방문하면 서버가 HTML 페이지를 완성해서 보내줍니다.
- 덕분에 브라우저가 바로 보여줄 수 있고, 초기 로딩이 빠름.
- SEO에도 아주 유리!
비유
→ 커피 주문하자마자 “짠!” 하고 완성된 커피가 도착.
→ 하지만 매번 새로 만들어야 하니 서버가 조금 바쁨.
SSG (Static Site Generation)
→ 카페가 아침마다 인기 커피를 미리 잔뜩 만들어 진열해 두는 것
- 서버가 HTML 파일을 “빌드 시점”에 미리 생성해둡니다.
- 주문이 들어오면 즉시 가져다 주니 엄청 빠르고 가벼움.
- 단, 콘텐츠가 자주 변하지 않을 때 가장 적합.
비유
→ 인기 메뉴(블로그 글 등)는 미리 진열.
→ 손님이 오면 바로 꺼내 주면 끝!
→ 하지만 신메뉴가 나오면 다시 만들어야 함.
ISR (Incremental Static Regeneration)
→ 카페가 인기 메뉴는 미리 만들어 두되, 일정 주기로 신선하게 교체
- SSG의 장점(빠름)을 살리면서도, 데이터를 일정 시간마다 새로 가져와서 페이지를 갱신.
- 즉, 정적 페이지 + 업데이트라는 개념.
비유
→ 인기 메뉴는 미리 진열해두고, 일정 시간 지나면 새로 커피를 만들어 교체.
→ 손님은 언제 와도 신선한 커피를 받을 수 있음.
정리
- SPA: 한 번 입장 후 내부에서 메뉴만 바꿈
- CSR: 내 브라우저에서 화면 완성
- SSR: 서버가 화면 만들어 전송
- SSG: 서버가 정적 페이지를 미리 만들어 둠
- ISR: 정적 페이지 + 일정 주기로 새로 갱신
결국 Next.js가 인기인 이유는, 프로젝트 성격에 맞춰 렌더링 방식을 자유롭게 섞어 쓸 수 있다는 점이에요.
👉 정적 블로그엔 SSG,
👉 검색이 중요한 사이트엔 SSR,
👉 페이지가 자주 바뀌는 곳엔 CSR/ISR!
헷갈릴 때는 꼭 카페 배달 비유를 떠올려보세요.
이해가 훨씬 쉬워질 거예요. ☕
혹시 더 궁금한 점이 있거나, 다른 주제로도 비유해볼까요?