노트

CSR·SSR·SSG·ISR

Rendering Strategies (CSR, SSR, SSG, ISR)

프론트엔드#nextjs · 연결된 개념 17개

쉽게 말하면

렌더링 전략은 HTML이라는 음식을 언제 어디서 만드느냐의 차이예요. 손님 식탁에서 조리(CSR), 주문마다 주방에서 조리(SSR), 미리 만들어 진열(SSG), 진열품을 주기적으로 새로 채우기(ISR)로 나눠요.

비유의 한계 실제로는 페이지마다 하나만 고르지 않아요. App Router에선 한 페이지 안에서 어떤 부분은 정적으로, 어떤 부분은 캐시로, 어떤 부분은 요청 때 스트리밍으로 보낼지 정해요. 그게 PPR이에요.

렌더링 전략은 HTML(HyperText Markup Language)을 언제, 어디서 만드느냐의 선택이다. 브라우저에서 만들면 CSR(Client-Side Rendering), 요청마다 서버에서 만들면 SSR(Server-Side Rendering), 빌드 때 미리 만들면 SSG(Static Site Generation), 미리 만든 것을 주기적으로 다시 만들면 ISR(Incremental Static Regeneration)이다.

방식만드는 시점장점단점
CSR브라우저(JS 실행 후)서버 부담 적음, SPA(Single-Page Application) 상호작용첫 화면 늦음, 빈 HTML이라 SEO(Search Engine Optimization) 불리 → SEO
SSR매 요청항상 최신, SEO요청마다 서버 비용, TTFB(Time to First Byte) 증가
SSG빌드CDN(Content Delivery Network)에서 바로 응답, 가장 빠름빌드 이후 데이터가 낡음
ISR빌드 + 주기적 재생성SSG 속도 + 어느 정도 최신실시간 데이터엔 부적합
  • SSR은 넓은 용어다. 빌드 때 만들든 요청 때 만들든 서버가 HTML을 만들면 SSR이고, SSG는 그 변형이다. 어느 쪽이든 브라우저에서 하이드레이션이 필요하다
  • ISR의 흐름: 재생성 주기가 지난 뒤 첫 요청에는 일단 기존 페이지를 주고, 백그라운드에서 새로 만든 뒤 다음 요청부터 새 페이지를 준다. HTTP(HyperText Transfer Protocol)의 stale-while-revalidate와 같은 전략이다(브라우저 캐시, staleTime과 gcTime)
  • Pages Router는 getServerSideProps·getStaticProps처럼 페이지 단위로 골랐다

App Router 이후

서버 컴포넌트, 스트리밍, 캐시가 합쳐지면서 "이 페이지는 SSR"처럼 페이지 단위로 나누는 의미가 줄었다. 한 페이지 안에서 어떤 부분은 정적으로, 어떤 부분은 캐시로, 어떤 부분은 요청 때 스트리밍으로 보낼지 설계한다. 그 모델이 부분 사전 렌더링(PPR)이고, 캐시는 "use cache"와 Cache Components·Next.js 캐시 계층에서 다룬다. 미리 만든 HTML을 어디서 서빙하느냐는 nginx로 SPA 배포 같은 배포 쪽 문제다.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • CSR bailout

    CSR(Client-Side Rendering) bailout은 미리 렌더(Prerender)되는 라우트에서 서버가 알 수 없는 값을 읽는 클라이언트 컴포넌트를 만나, 가장 가까운 Suspense 경계까지의 클라이언트 컴포넌트 트리를 서버 렌더에서 포기하고 브라우저 렌더로 넘기는 일이다. 대표 원인이 useSearchParams()다. 빌드 때는 ?q=신발 같은 쿼리를 모르기 때문이다.

  • CSRF

    CSRF(Cross-Site Request Forgery, 사이트 간 요청 위조)는 로그인한 사용자가 악성 사이트를 방문했을 때, 그 사이트가 사용자의 브라우저를 시켜 사용자 모르게 원래 사이트에 요청을 보내게 하는 공격이다. 공격자는 토큰을 훔치지 않는다. 브라우저가 쿠키를 알아서 붙여 준다는 점을 이용한다.

  • 서버 전송 이벤트(SSE)

    서버 전송 이벤트(Server-Sent Events, SSE)는 HTTP(HyperText Transfer Protocol) 응답 하나를 닫지 않고 열어 둔 채, 서버가 원할 때마다 텍스트 이벤트를 흘려보내는 서버 → 클라이언트 단방향 푸시 방식이다. HTML 표준에 정의돼 있고 브라우저는 EventSource로 받는다.

  • loading 경계와 레이아웃 끌어올리기

    Next.js App Router에서 loading.tsx는 같은 세그먼트의 page와 그 아래(하위 layout 포함)를 suspense로 감싸지만, **같은 세그먼트의 layout은 감싸지 않는다**. 그래서 데이터를 기다릴 필요가 없는 공통 UI(탭바, 필터 헤더)를 page에서 layout으로 끌어올리면 스켈레톤에 덮이지 않고 처음부터 실제 모습으로 보인다.

보기 옵션