Taeeun Kim
Next.jsCSRSSRSPASSGISR

Next.js 웹 렌더링 개념

Taeeun Kim
2025년 5월 27일
목차

프론트엔드와 Next.js를 공부하며, 기본 개념이지만 자주 헷갈리는 렌더링 방식을 정리해보자.

Rendering 이란?

  • JavaScript를 실행하여 HTML을 생성하는 과정
  • 생성된 HTML을 브라우저에 표시하여 실제 화면을 구성하는 과정

CSR (Client Side Rendering)

Next.js 의 다양한 렌더링 개념에 앞서 React 앱의 디폴트 랜더링 방식인 CSR에 대해 알아보자.

  • 동작 원리
    • 유저가 브라우저로 서버에게 접속 요청
    • 서버가 브라우저로 빈 HTML 파일을 반환 → 브라우저에서 빈 화면이 렌더링
      • <body> 태그가 비어 있음
    • 서버는 실제 화면 구성을 위한 JS 번들을 함께 전송하며 이 JS가 브라우저에서 실행되어 HTML을 동적으로 생성한다
    • 브라우저는 이 JS Bundle을 실행하고 그 결과를 화면에 렌더링
  • 이후 페이지 전환 동작
    • 초기에 모든 리소스를 받아오므로, 이후 페이지 전환 시 서버 요청 없이 빠르게 전환할 수 있다.

💡 FCP (First Contentful Paint) 가 느린데 이는 접속 요청부터 처음 브라우저에 컨텐츠가 렌더링 되기까지 걸리는 시간을 말한다
최소한의 HTML 을 반환하기에 SEO 최적화가 안된다

여기서 잠깐, SPA (Single Page Application) 란?

CSR 렌더링의 특징 중 하나는 초기에 빈 HTML 페이지에서 브라우저가 동적으로 다른 페이지들도 렌더링 한다.

  • 하나의 HTML 파일 안에서 JS 를 통해 동적으로 페이지 전환이 이루어지는 웹 애플리케이션을 SPA 라고 한다.

SSR (Server Side Rendering)

Next 에서 제공하는 SSR 는 CSR 의 단점을 보완하면서도 빠른 클라이언트 라우팅을 유지하는 방식이다.

  • 동작 원리
    • 유저가 브라우저로 서버에게 접속 요청
    • 서버에서 요청한 페이지와 관련된 JS 리소스를 실행하고 HTML 로 변환 후 브라우저로 전달
    • 브라우저는 서버에서 렌더링 된 페이지의 HTML 을 화면에 렌더링
      • 요청한 페이지에 필요한 JS만 실행하고 HTML을 생성하므로 초기 로딩 속도(FCP)가 CSR보다 빠르다!
    • 서버에서 현재 페이지의 JS Bundle 을 브라우저로 전달
    • 브라우저에서 번들을 실행시켜 화면에 그려져있는 HTML 요소들과 연결
      • 이 과정을 hydration / 수화 라고 한다**.** 정적인 HTML 요소에 JavaScript 기능을 부여해 상호작용이 가능하게 만드는 과정이다.
      • “말라 있는 컴포넌트에 물을 주어 생명을 불어넣는 느낌” 으로 비유할 수 있다
    • 이후 페이지 전환 동작
      • 페이지 전환 시 Next.js는 pre-fetching을 통해 연결된 페이지의 JavaScript 번들을 미리 받아두어 빠르게 전환할 수 있도록 돕는다.
      • 다만 SSR 방식에서는 HTML은 여전히 서버에서 실시간으로 생성되기 때문에 페이지 전환 시마다 서버 요청이 발생한다.

💡 요청 페이지와 관련된 JS 리소스만을 실행하고 전달하기 때문에 FCP 와 TTI 가 CSR 방식보다 훨씬 빠르다!
이미 렌더링 되어 완성된 HTML 페이지를 서버에서 보내기 때문에 SEO (Search Engine Optimization) 가 뛰어나다.

TTI (Time To Interactive) 와 FCP (First Contentful Paint)

HTML이 렌더링된 후 hydration을 통해 상호작용이 가능한 상태가 되었을 때를 TTI(Time To Interactive)라고 한다.

렌더링 방식FCP (최초 콘텐츠 렌더링 시점)TTI (상호작용 가능 시점)
CSR느림느림 (FCP = TTI)
SSR빠름FCP보다 약간 느림

SSG (Static Site Generation)

CSR과 SSR은 페이지 요청 시마다 서버에서 데이터를 받아오므로 서버 상태에 따라 페이지 로딩 속도가 느려지거나 오류가 발생할 수 있다. SSG 는 이런 문제를 해결하면서 SSR 의 장점을 가지고 있다.

  • 동작 원리
    • 웹 빌드 타임 시점에 서버에서 HTML 페이지들을 미리 렌더링
    • 접속 요청 시 이미 완성된 HTML 페이지가 브라우저로 즉시 전달되고 화면에 렌더링
      • FCP 가 더 빨라지며 SEO 최적화도 유리하다.
    • 관련 JS 번들을 브라우저에 전송하고 hydration 과정을 통해 상호작용 기능을 부여
  • 이후 페이지 전환 동작
    • 이후의 작동 방식은 SSR과 유사하다.

💡 미리 생성된 정적 HTML을 제공해서 실시간 서버 렌더링에 비해 서버 부하가 적다.
빌드 시점에 데이터가 고정되기 때문에 동적 컨텐츠를 가진 페이지에는 적합하지 않다.

ISR (Incremental Static Regeneration)

Next.js 에서 SSG 의 단점인 데이터 고정을 보완하기 위해 도입된 방식이다.

  • 동작원리
    • SSG 와 동일하나 설정된 시간 간격을 두고 revalidate, 즉 서버에서 미리 렌더링 해놓은 HTML 페이지들을 다시 생성
    • 접속 요청 시 최신 데이터로 완성된 HTML 페이지를 브라우저로 전달
  • 이후 페이지 전환 동작
    • SSR 과 유사하게 전환할 수 있다.

💡 ISR은 HTML을 미리 생성해두기 때문에 빠르면서 데이터가 자동으로 주기적 갱신이 된다.

렌더링 방식의 특징 비교표

렌더링 방식FCPTTI페이지 이동 속도SEO데이터 최신성서버 부하
CSR느림느림빠름낮음최신낮음
SSR빠름중간중간높음최신높음
SSG매우 빠름중간중간높음오래됨낮음
ISR매우 빠름중간중간높음주기적 최신낮음

방식별 추천 use case

typesuse case예시
CSR유저 상호작용이 많고 SEO가 중요하지 않을 때채팅 앱, 어드민 대시보드
SSR검색엔진 최적화가 중요하고 실시간 데이터가 필요할 때블로그, 뉴스, 상품 디테일
SSG변경이 거의 없는 정적인 컨텐츠를 제공할 때랜딩 페이지, 문서 사이트
ISR컨텐츠가 주기적으로 업데이트 될 때블로그, 뉴스, 상품 리스트

Next.js의 가장 큰 강점 중 하나는 CSR, SSR, SSG, ISR 등 다양한 렌더링 방식을 자유롭게 조합할 수 있다는 점이다. Hybrid Rendering 을 활용하여 페이지의 특성과 목적에 맞춰서 사용자에게는 더 빠르고 안정적인 웹 경험을 제공할 수 있다.

참고 자료