웹 렌더링 방식

클라이언트 사이드 렌더링 (CSR)

렌더링하는 주체가 클라이언트(브라우저)

처음에 비어있는 HTML을 내려 받고 링크된 자바스크립트를 다운받은 후 클라이언트 쪽에서 자바스크립트와 함께 동적으로 화면을 구성하여 사용자에게 최종적으로 화면을 보여준다.

1. 장점
   • 한번 로딩 되면 이후에는 빠른 UX제공
   • 서버의 부하가 적음
2. 단점 
   • 페이지 로딩시간이 오래 걸림
   • 자바스크립트 활성화가 필수
   • SEO최적화가 어려움
   • 보안에 취약
   • CDN에 캐시되지 않음

스태틱 사이트 제너레이션 (SSG)

렌더링하는 주체자가 서버이고 빌드할때 렌더링되어 렌더링된 화면을 클라이언트에서 다운만 받고 사용자에게 최종적으로 보여준다.

1. 장점
   • 페이지 로딩시간이 빠름
   • 자바스크립트 활성화 되지 않아도 됨
   • SEO최적화에 좋음
   • 보안이 뛰어남
   • CDN에 캐시 됨
2. 단점
   • 데이터가 정적임
   • 사용자별 정보 제공이 어려움

인크리멘탈 스태틱 리제너레이션(ISR)

렌더링하는 주체가 서버이고 설정된 시간에 따라 주기적으로 렌더링 되어 업데이트 한다.

1. 장점
   • 페이지 로딩시간이 빠름
   • 자바스크립트 활성화 되지 않아도 됨
   • SEO최적화에 좋음
   • 보안이 뛰어남
   • CDN에 캐시 됨
   • 주기적으로 업데이트 됨
2. 단점
   • 실시간 데이터가 아님
   • 사용자별 정보 제공의 어려움

서버 사이드 렌더링(SSR)

렌더링하는 주체가 서버이고 클라이언트에서 요청시 렌더링 된다.

1. 장점
   • 페이지 로딩시간이 빠름
   • 자바스크립트 활성화 되지 않아도 됨
   • SEO최적화에 좋
   • 보안이 뛰어남
   • 요청시 렌더링되어 실시간 데이터를 사용
   • 사용자별 필요한 데이터 사용
2. 단점
   • 비교적 느릴 수 있음
   • 서버의 과부하가 걸릴 수 있음
   • CDN에 캐시가 되지 않음

 

로그인이 필요없고 데이터 변경이 없는 정적인 웹 페이지 SSG

로그인이 필요 없고 데이터가 변경 되지만 자주 업데이트 되지 않음 ISR

로그인이 필요 없고 데이터가 변경 되지만 자주 업데이트 됨 SSR 또는 ISR+CSR 또는  SSG+CSR

로그인이 필요 함 CSR 또는 SSR 또는 SSG+CSR