Next.js 렌더링 방식을 제대로 이해하기
안녕하세요! 오늘은 Next.js에서 지원하는 다양한 렌더링 방식에 대해 살펴보려 합니다.
최근 웹 개발 패턴을 보면, 검색 엔진 최적화(SEO), 사용자 경험(UX), 성능(Performance) 모두를 만족시키기 위해 여러 가지 렌더링 전략을 혼합하는 추세가 두드러지고 있죠.
Next.js는 이러한 요구에 딱 맞게 SSR, SSG, ISR, CSR 등 다양한 방식을 지원합니다.
이번 글에서는 각각의 특징과 장단점, 그리고 Next.js 13 버전(app 라우터)에서의 추가적인 관점까지 정리해 보겠습니다.
1. Server-Side Rendering (SSR)
SSR이란?
서버사이드 렌더링(SSR)이란, 사용자가 웹 페이지를 요청할 때마다 서버 측에서 완성된 HTML을 생성해 보내주는 방식을 말합니다.
전통적인 웹 개발 방식과 유사하지만, React 컴포넌트 기반으로 동작한다는 점이 특징입니다.
Next.js에서 어떻게 구현할까?
- pages 라우터 기준으로는
getServerSideProps함수를 사용합니다.
- app 라우터 기준으로는 서버 컴포넌트(Server Component)에 데이터 페칭 로직을 넣어주면 됩니다.
장점
- 검색 엔진 최적화(SEO) 우수 검색 엔진 봇이 크롤링할 때 이미 HTML이 완성되어 있으므로, 페이지 인덱싱이 수월합니다.
- 최신 데이터 즉시 반영 매번 요청이 올 때마다 서버에서 데이터를 가져오므로, 사용자는 항상 갱신된 정보를 확인할 수 있습니다.
- 초기 로딩이 빠른 편 비록 정적 렌더링(SSG)만큼은 아니지만, 그래도 빈 화면 없이 어느 정도 내용이 미리 채워져 오기 때문에 사용자 입장에서는 첫 화면 로딩 시간을 줄일 수 있습니다.
단점
- 서버 비용 증가 모든 요청마다 서버가 React를 실행해 HTML을 생성해야 하므로, 트래픽이 많아지면 서버 부하가 높아질 수 있습니다.
- 정적 파일 대비 로딩 속도 열세 정적 파일로 만들어 두는 SSG보다는 TTFB(Time To First Byte)가 느릴 가능성이 있습니다.
2. Static Site Generation (SSG)
SSG란?
정적 사이트 생성(SSG)이란, 빌드 시점에 미리 HTML을 생성해 두는 방식입니다.
React 컴포넌트를 실행해 정적인 HTML로 변환한 뒤 배포하면, 사용자는 요청 시 즉시 정적 파일을 받아보게 됩니다.
Next.js에서 어떻게 구현할까?
- pages 라우터라면
getStaticProps함수를 사용합니다.
- app 라우터에서는 서버 컴포넌트에서
fetch()등을 사용해 빌드 시 데이터를 가져오고, 해당 결과를 정적으로 캐싱해둡니다.
장점
- 뛰어난 성능 CDN을 활용해 전 세계 어디서나 빠르게 정적 파일을 서빙할 수 있습니다.
- 서버 비용 절감 별도의 서버 로직 없이 정적 파일만 배포하면 되므로, 트래픽이 많아도 상대적으로 비용이 적게 듭니다.
- 보안성 런타임에 DB나 API에 직접 접근하지 않는다면, 공격 표면이 줄어듭니다.
단점
- 데이터 변경에 대한 민감도 한 번 빌드가 끝나면, 내용이 바뀌어도 HTML이 자동으로 업데이트되지 않습니다. 새로 빌드/배포해야 반영됩니다.
- 빌드 시간 증가 페이지가 아주 많을 경우, 빌드 시점에 모든 페이지를 만들어야 하므로 빌드 시간이 길어질 수 있습니다.
3. Incremental Static Regeneration (ISR)
ISR이란?
Incremental Static Regeneration은 말 그대로 SSG의 장점을 유지하면서도, 일부 페이지를 일정 주기나 조건에 따라 재생성할 수 있도록 하는 기능입니다.
어떻게 동작할까?
- 페이지 요청이 들어왔을 때, 캐시가 유효 기간을 넘겼다면 백그라운드에서 해당 페이지를 새로 빌드하고, 완성된 HTML을 캐시에 교체합니다.
- 첫 요청 사용자는 여전히 구 버전을 보겠지만, 이후 요청부터는 신 버전을 보게 되는 식이죠.
장점
- SSG의 높은 성능 유지 + 일정 주기의 최신 데이터 반영 자주 업데이트될 필요는 없지만, 완전히 고정된 데이터도 아니라면 ISR이 큰 도움이 됩니다.
- 서버 부하 절감 모든 요청을 SSR로 처리하지 않고, 필요한 시점에만 빌드를 거치므로 서버 리소스 사용이 줄어듭니다.
단점
- 즉각적인 업데이트는 불가능 재생성 주기(또는 트리거) 동안은 예전 데이터가 노출될 수 있습니다.
- 캐시/재생성 메커니즘 이해 필요 단순 SSG나 SSR보다 로직이 복잡해, 내부 동작을 이해해야 디버깅이나 에러 처리가 수월해집니다.
4. Client-Side Rendering (CSR)
CSR이란?
클라이언트사이드 렌더링(CSR)은 기존의 React SPA와 동일한 방식입니다. 즉, 서버는 최소한의 HTML(빈 틀)만 전달하고, 브라우저에서
fetch() 등을 통해 API를 호출하여 데이터를 받아와 렌더링합니다.Next.js에서 어떻게 구현할까?
- *클라이언트 컴포넌트(Client Component)**를 선언하고, React Query나 SWR, 혹은 기본
fetch()를 활용하여 브라우저에서 데이터를 가져와 화면을 구성합니다.
장점
- 동적인 사용자 인터랙션 SPA처럼 화면 전환이나 각종 이벤트 처리가 빠르고 유연합니다.
- 서버 렌더링에 대한 부담 감소 서버는 큰 로직 없이 단순히 HTML 껍데기를 제공하기만 하면 되므로, 서버 자원을 절약할 수 있습니다.
단점
- SEO 취약 가능성 Google 등 대부분 검색 엔진이 JS 해석을 지원하긴 하지만, SSR/SSG 대비 인덱싱 효율이 떨어질 수 있습니다.
- 초기 로딩 지연 JS를 다운받고 실행한 뒤 데이터를 패칭해야 페이지 내용이 보이므로, 첫 화면이 늦게 보일 수 있습니다.
5. Next.js 13 (App Router)의 새로운 관점
Next.js 13 버전부터는 app 디렉터리를 기반으로 하는 새로운 라우팅 구조가 도입되었습니다.
이 구조에선 페이지 단위가 아니라 레이아웃 단위로 트리를 구성하고, **서버 컴포넌트(Server Component)**와 **클라이언트 컴포넌트(Client Component)**를 명시적으로 구분해 사용할 수 있습니다.
서버 컴포넌트(Server Component)
- 서버에서만 렌더링되어, 클라이언트에선 HTML 결과만 받습니다.
- DB나 API 접근이 필요한 로직을 안전하게 서버 측에서 처리할 수 있습니다.
fetch()시{ cache: 'no-store' }(SSR)나{ next: { revalidate: ... } }(ISR) 같은 옵션을 통해 렌더링 전략을 세분화할 수 있습니다.
클라이언트 컴포넌트(Client Component)
- 브라우저 환경에서 동작하므로, 사용자 이벤트나 동적 상태 관리를 담당합니다.
- 서버에서 받은 props를 사용해 렌더링하거나, 브라우저에서 직접 API 호출을 해도 무방합니다.
이를 통해 한 페이지 안에서도 일부는 서버사이드 렌더링(SSR/ISR), 나머지는 **클라이언트사이드 렌더링(CSR)**을 적용할 수 있어, 성능과 사용자 경험 둘 다 챙기는 하이브리드 접근이 훨씬 쉬워졌습니다.
6. 하이브리드 접근의 예시
현실적인 프로젝트에서는 SSR/SSG/ISR/CSR 중 하나만 쓰기보다, 각 섹션별로 최적화된 방식을 섞어서 씁니다.
예를 들어,
- 블로그 포스트 목록은
getStaticProps+revalidate옵션(ISR)으로 주기적으로 업데이트
- 최신 댓글 영역은 서버 컴포넌트로 SSR 처리하여 즉시 반영
- 사용자 프로필 정보는 클라이언트 컴포넌트에서 CSR로 실시간 반영
- 페이지 상단 배너처럼 변동이 적은 컨텐츠는 SSG로 빌드 시점에만 생성
이처럼 상황에 따라 렌더링 방식을 달리 적용하면, 서버 부하와 사용자 경험, 그리고 SEO를 모두 균형있게 관리할 수 있습니다.
7. 마무리하며…
지금까지 Next.js가 제공하는 SSR, SSG, ISR, 그리고 CSR에 대해 이론적으로 살펴봤습니다.
Next.js의 가장 큰 매력은 이 모든 방식을 자유롭게 혼합할 수 있다는 점입니다.
- SEO가 중요한 페이지는 SSR/SSG
- 자주 안 변하는 콘텐츠는 SSG 또는 ISR
- 실시간 데이터가 필요한 부분은 SSR 또는 클라이언트 측에서 CSR
- 이벤트 핸들링이 복잡한 기능은 클라이언트 컴포넌트
이처럼 프로젝트 요구사항과 데이터 특성을 잘 파악해서 렌더링 전략을 수립한다면, 성능과 사용자 만족도를 동시에 잡을 수 있을 것입니다.
Next.js 13에 새로 도입된 app 라우터와 서버/클라이언트 컴포넌트 개념 또한 이러한 하이브리드 방식을 훨씬 더 간결하고 직관적으로 만들어줍니다.
Next.js의 렌더링 전략을 잘 이해하고, 내 프로젝트에 맞게 가장 효율적인 방식을 도입해보세요!
분명 개발 생산성과 사용자 만족도 모두 향상될 거라 믿습니다.