CSR / SSG / ISR / SSR, 4가지 렌더링 방식에대해서 정리해보자
CSR
Client Side Rendering
클라이언트(웹이라면 브라우저)단에서 렌더링 / React 렌더링 방식
앱에 있는 페이지들이 서버에서 미리 렌더링 됨, 정적으로 생성(static)
유저가 접속을 하면 브라우저는 처음엔 빈문서를 전달하고 자바스크립트 파일을 다운로드 하는 동안 유저에게 빈화면을 보여주며, 다운이 완료되면 리액트.js를 실행하여 UI를 동적으로 렌더링 하며 유저에게 화면을 보여주게 된다.
장점
한번 로딩 되면 빠른 ux를 제공하고 서버의 부하가 작다.
문제점
페이지가 보여질때까지의 로딩시간이 길다.
사용자의 설정에서 자바스크립트 활성화가 필수
HTML에 root인<div>한개만 존재함으로 SEO에는 좋지 않다.
클라이언트의 모든 코드를 전부 다운받기때문에 보안에 취약함
CDN에 HTML이 캐시가 안됨
SSG
Static Site Generation
서버에서 렌더링하고, 빌드할 때 렌더링 됨
- 서버에서 빌드할 때 html(페이지)를 미리 만들어 둠
- 요청이 들어올 때 미리 만들어둔 html을 보여준다.
- 동일한 요청을 할 경우 CDN에 미리 저장된 html이 있으면 CDN에서 html을 보여주고 서버까지 가지않아도 된다
장점
페이지 로딩 시간이 빠름
자바스크립트 없이도 html 페이지를 볼 수 있음
SEO 최적화
보안이 뛰어남
CDN에 캐시가 됨
문제점
데이터가 정적임
정적인 웹사이트에 적합 (회사 소개페이지 같은..?)
사용자별 정보 제공의 어려움
ISR
Incremental Static Regeneration
서버에서 렌더링하고, 주기적으로 렌더링 (설정해 준 주기마다)
SSG와 동일한 원리
장점
페이지 로딩 시간이 빠름
자바스크립트 없이도 html 페이지를 볼 수 있음
SEO 최적화
보안이 뛰어남
CDN에 캐시가 됨
주기마다 데이터가 다시 업데이트 (하지만 실시간 데이터는 아님)
문제점
데이터가 정적임
정적인 웹사이트에 적합 (회사 소개페이지 같은..?)
사용자별 정보 제공의 어려움
SSR
Server Side Rendering
클라이언트에서 서버에 요청시에 서버단에서 렌더링 / Nextjs 렌더링 방식
장점
페이지 로딩 시간이 빠름
자바스크립트 없이도 html 페이지를 볼 수 있음
SEO 최적화
보안이 뛰어남
CDN에 캐시가 됨
실시간 데이터를 사용
요청하는 사용자 별로 데이터사용이 가능함
문제점
서버에서 다 만들어서 와야함으로 비교적 느릴 수 있음
페이지 전체를 SSR로 할 경우 서버에 과부하가 걸릴 수 있음
CDN에 캐시가 안됨
한가지만 사용하기에 적합하지 않은 사이트를 구성 할 경우
페이지별 또는 컴포넌트별로 렌더링방식을 선택해서 사용할 수 있는 하이브리드 방식도 사용한다.
공부하며 정리&기록하는 ._. 씅로그
