CSR vs SSR vs SSG의 차이

CSR(Client Side Rednering)

과정

👉 유저가 앱에 접속한다

👉 앱은 브라우저에게 javascript 정보가 들어있는 빈 html 문서를 전달

👉 브라우저가 javascript 파일을 다운로드하고, 유저는 그동안 빈 화면을 봄

👉 다운로드가 끝나면 브라우저는 리액트 코드가 들어있는 js 파일을 실행 (=document.createElement과 같이 JS에서 HTML 태그를 생성하기 때문에, JS 파일이 실행되기 전까지는 빈화면인 것이다)

 

장점

1. 새로고침이 발생하지 않아 자연스러운 UX
2. 서버 부담이 적다

 

단점

1. 첫페이지 로딩이 SSR에 비해서 느리다
2. SEO에 취약하다

 

---

 

SSR(Server Side Rendering)

 

과정

👉 유저가 앱에 접속한다

👉 서버에서 리액트를 실행하고, 리액트는 UI를 렌더링

👉 서버는 렌더링된 결과를 통해 HTML 파일을 브라우저에 전달한다 (이 때 유저는 앱의 초기화면을 보게 된다)

👉 이후에 브라우저는 리액트 코드가 들어있는 javascript 파일을 다운받아 실행

👉 앞에서 불러온 HTML과 자바스크립트 코드가 동기화되어 앱이 동적으로 상호작용

 

장점

1. 첫 페이지 로딩이 CSR에 비해 빠르다 (=JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다)
2. SEO(검색엔진최적화) - google의 검색봇 등의 크롤링을 위해서 정적인 웹페이지의 리소스를 제공

 

단점

1. 첫페이지 외 나머지 페이지 로딩은 CSR에 비해 느리다(=첫 페이지를 로딩한 과정을 정확하게 다시 실행하기 때문)
2. 매번 서버에 요청하기 때문에 서버 자원을 더 많이 사용한다
3. 페이지 로드가 너무 무겁다면, 오히리 사용자 경험을 개선하는게 아니라 해칠 수 있다 (ex 대시보드)

---

SSG (Static Site Generator)

과정

빌드 시에 HTML이 생성되고, 매 요청마다 재사용

각 페이지의 html, js, css 파일을 빌드해서 URL별로 파일을 따로 생성한다. 이미 정의되어있는 파일이 존재하므로, 매우 빠른 정적 렌더링을 사용할 수 있다.

정적 블로그, 회사소개 사이트 등 단순한 페이지는 항상 같은 화면이 유저에게 보여지므로 매번 동적으로 생성될 필요가 없기 때문에 SSG를 사용하는 게 유리하다.

 

장점

1. SEO에 유리하다는 서버사이드렌더링의 장점을 취함
2. 미리 만들어 둔 페이지를 클라이언트에게 제공하므로 렌더링 속도가 빠름

 

단점

1. 모든 URL에 대해 개별 HTML 파일을 생성해야 하기 때문에, URL을 예측할 수 없으면 적용이 어렵다.