웹 페이지 렌더링 방식 이해: CSR, SSR, SSG, ISG

웹 페이지를 표시하는 방법

페이지를 렌더링 하는 방법에는 CSR, SSR, SSG, ISG 가 있다.

React를 처음 배울 때 CSR, SSR의 기본적인 차이점에 대해서 공부했었고, 이때의 개념으로 CSR, SSR을 사용해 왔다. 하지만 Next를 공부하면서 SSG, ISG에 대한 개념을 접하게 되었고 이 부분에 대해서 미흡하여 글을 작성했다.

1. CSR : 클라이언트 사이드 렌더링

• 특징
  • 모든 렌더링 작업이 사용자 브라우저에서 진행된다.
  • 페이지 로딩 후 필요한 데이터만 서버로부터 비동기적으로 불러와서 처리한다.
• 장점
  • 사용자 인터랙션이 매우 빠르고, 애플리케이션의 동적인 부분을 효과적으로 처리할 수 있다.
• 단점
  • 초기 로딩 시 모든 스크립트를 불러와야 해서 시간이 오래 걸릴 수 있다
  • 검색 엔진 최적화(SEO)에 불리하다.
• 보안
  • 코드 스플리팅 : JS 번들을 여러 개의 청크로 나누어 필요한 시점에만 로드하도록 구성한다.
  • SSR 또는 프리렌더링 : 검색 엔진 최적화를 위해서 서버 사이드 렌더링으로 변경하거나 프리렌더링 기술을 사용하여 초기 페이지 로딩 시 검색 엔진이 크롤링할 수 있는 HTML을 제공한다.
  • 동적 임포트 : 사용자 경험에 필수적이지 않은 컴포넌트는 동적으로 불러와서 처리한다

sequenceDiagram
    participant 사용자
    participant 브라우저
    participant 서버
    사용자->>브라우저: 페이지 요청     
    브라우저->>서버: HTML/CSS/JS 요청     
    서버->>브라우저: HTML/CSS/JS 응답     
    브라우저->>브라우저: 페이지 렌더링     
    브라우저->>서버: API 요청(데이터 필요)     
    서버->>브라우저: API 응답     
    브라우저->>브라우저: 데이터로 페이지 업데이트

 

2. SSR : 서버 사이드 렌더링

• 특징
  • 서버에서 HTML을 완성하여 브라우저로 보내주고, 브라우저는 이를 받아서 화면에 표시한다.
• 장점
  • 초기 페이지 로딩 속도가 빨라 사용자가 컨텐츠를 빠르게 볼 수 있으며, SEO에 유리하다.
• 단점
  • 각 페이지 요청에 대해 서버에서 렌더링을 해야 하기 때문에 서버 부하가 크다.
  • 사용자 인터랙션이 CSR에 비해 느리다.
• 보안
  • 캐싱 : 페이지나 데이터를 캐시 하여 반복적인 서버 요청을 줄인다. 서버 부담을 감소하고 응답 시간을 단축할 수 있다.
  • 부하 분산 : 로드 밸런서를 활용하여 요청을 여러 서버에 분산시키고, 서버의 과부하를 방지한다.
  • 데이터 패칭 최적화 : 데이터를 필요한 최소한으로 불러오고, 사용자의 인터랙션에 따라 데이터를 추가로 불러오는 방식으로 구성한다.

sequenceDiagram
    participant 사용자
    participant 브라우저
    participant 서버
    사용자->>브라우저: 페이지 요청
    브라우저->>서버: 페이지 요청
    서버->>서버: HTML 렌더링
    서버->>브라우저: 렌더링된 HTML 응답
    브라우저->>브라우저: 페이지 표시

 

 

3. SSG : 정적 사이트 생성 (Static Site Generation)

• 특징
  • 빌드 타임에 모든 페이지를 HTML로 미리 생성한다.
• 장점
  • 매우 빠른 로딩 속도와 높은 보안성을 제공한다.
  • 서버 부하가 거의 없다.
• 단점
  • 사이트에 실시간으로 변하는 데이터를 표현하기 어렵다.
  • 업데이트가 필요한 경우 전체 사이트를 다시 빌드해야 한다.
• 보안
  • ISG : 특정 페이지만 재생성하여 전체 사이트의 재빌드 없이 최신 데이터를 반영할 수 있다.
  • 클라이언트 사이드 자바스크립트를 사용하여 최신 데이터를 동적으로 불러온다.

sequenceDiagram
    participant 사용자
    participant 브라우저
    participant 서버
    사용자->>브라우저: 페이지 요청
    브라우저->>서버: HTML 요청
    Note right of 서버: 빌드 타임에 생성된 HTML
    서버->>브라우저: 정적 HTML 응답
    브라우저->>브라우저: 페이지 표시

 

 

4. ISG : 점진적 정적 재생성 (Incremental Static Regeneration)

• 특징
  • SSG의 개념을 확장하여, 사이트가 이미 빌드된 후에도 특정 페이지를 요청받을 때 해당 페이지만 다시 생성하고 캐시를 업데이트할 수 있다.
• 장점
  • 정적 사이트의 빠른 로딩 속도와 보안성을 유지하면서, 필요에 따라 특정 페이지만 업데이트할 수 있는 유연성을 제공한다.
• 단점
  • 전체적으로 SSG에 비해 구현 복잡성이 증가한다.
  • 재생성 주기 관리가 필요하다.
• 보안
  • 재생성 전략 최적화 : 트래픽이 많은 시간대에 재생성을 피하고, 낮은 트래픽 시간대에 자동으로 페이지를 재생성하도록 스케줄링한다.
  • 효율적인 캐시 관리 : 캐시 된 페이지의 만료 신간을 적절하게 설정하고, 필요할 때만 페이지를 재생성하도록 구현한다

sequenceDiagram
    participant 사용자
    participant 브라우저
    participant 서버
    사용자->>브라우저: 페이지 요청
    브라우저->>서버: HTML 요청
    alt 페이지가 캐시에 있음
        서버->>브라우저: 캐시된 HTML 응답
    else 페이지 재생성 필요
        서버->>서버: HTML 재생성
        서버->>브라우저: 새로운 HTML 응답
    end
    브라우저->>브라우저: 페이지 표시

 

각 렌더링 방식의 우선순위

아래의 상황은 일반적인 상황일 때를 말한 것이다. 각 프로젝트에 따라서 다를 수 있기 때문에 프로젝트에 맞춰서 선택해야 한다.

업데이트 주기에 따라 (업데이트 주기가 짧을수록)

CSR > SSR > ISG > SSG

SEO(검색 엔진 최적화)의 중요도에 따라

SSR > ISG > SSG > CSR

초기 로딩 속도에 따라

SSG > ISG > SSR > CSR

사용자 인터랙션의 복잡성에 따라

CSR > SSR > ISG > SSG

트래픽 부하 대응에 따라

SSG > ISG > SSR > CSR

보안성에 따라

SSG > ISG > SSR > CSR