CSR
CSR이란?
- Client Side Rendering
- 페이지의 내용을 브라우저에서 그려준다.
- 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 방식
CSR의 단점
- 사용자가 페이지 요청을 했을 때 보여지기까지 시간이 오래걸릴 수 있다.
- SEO(Search Engine Optimiztion)
- CSR은 처음에 HTML에 아무 내용도 없기 때문에 웹 크롤러가 읽어갈 수 있는 정보가 없다. 따라서 검색엔진들이 웹페이지를 분석하기에 CSR은 나쁘다고 할 수 있다.
SSR
SSR이란?
- Server Side Rendering
- 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식
- 기존 CSR의 느린 페이지 로딩과 SEO 문제 해결
SSR의 단점
- 서버 과부화 발생 가능
- TTV(Time To View)와 TTI(Time To Interact)의 공백시간 발생
- 서버에서 만들어진 HTML 파일을 가져오게 되고 사용자는 바로 웹 사이트를 볼 수 있다. 하지만 웹 사이트를 동적으로 제어할 수 있는 자바스크립트 파일은 아직 받아오지 않았기 때문에 사용자가 클릭을 해도 반응하지 않는다. 결국 자바스크립트 파일을 받아와야지만 사용자의 요구사항을 처리할 수 있는 상호작용이 가능해지는 것이다.
- 반면 CSR은 빈 HTML을 보여주다가 자바스크립트 파일을 받아오는 순간 웹 사이트가 보여지기 때문에 TTV와 TTI의 공백시간이 없다.
SSG
SSG란?
- Static Site Generation
- 정적 페이지
- 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청이 들어오면 이미 완성된 파일을 반환하는 방식
- 서버에서 요청할 때 즉시 만드는 것이 아닌 미리 만들어 놓는 점이 SSR과 다르다.
- 바뀔 일이 적은 페이지에 사용하면 좋다.
SSG의 단점
- build시에 필요한 페이지들을 미리 만들어놓기 때문에 build 시간이 길다.
- 정보가 업데이트 되어도 페이지에는 최신 정보가 반영되지 않는다.
ISR
ISR이란?
- Incremental Static Regeneration
- SSG와 같이 build 시점에 페이지를 렌더링 한다.
- 단, 설정한 시간마다 페이지를 새로 렌더링한다. (revalidate)
ISR의 단점
- SSG와 같이 페이지에 최신 정보가 반영되어있지 않을 수 있다.
각 방식을 사용하면 좋은 경우
- CSR : SEO에 의존하지 않는 사이트, 사용자와 상호작용이 많은 경우
- SSR : SEO에 크게 의존하는 매우 동적인 콘텐츠를 포함하는 사이트, 업데이트 되어야 하는 경우
- SSG : 콘텐츠가 거의 변하지 않는 사이트, 수정할 때마다 사이트를 다시 배포해도 괜찮은 경우
- 회사 홈페이지
- ISR : 콘텐츠가 동적이지만 자주 변경되지 않는 사이트
- 블로그
- 개인 웹사이트
