브라우저의 렌더링 방식은 CSR과 SSR로 나뉜다. 렌더링 방식이란 화면에 그려지는 HTML을 누가 주체가되어 그려줄 것이냐하는 것을 의미한다.
1990년 중반까지는 모두 static 사이트 였다. 즉, 서버에 html 파일을 저장해놓고 브라우저의 요청에 따라 html 파일을 받아와서 화면에 보여주는 형태인데, 이를 MPA(Multi Page Application)라 한다. 이러한 형태의 문제는 페이지 내에서 다른 링크를 클릭하면 다시 html을 요청해서 받아와 페이지 전체를 업데이트 해야하기 때문에 화면의 깜빡임이 있다는 것이다. 이러한 문제를 해결하기 위해 나오게된 기술이 바로 SPA(Single Page Application)이다.
CSR(Client Side Rendering)
클라이언트측에서 렌더링하는 방식으로, TTV(Time To View)와 동시에 TTI(Time To Interact)가 가능하다.
렌더링 방식
1. 브라우저의 요청에 서버에서 브라우저에게 비어있는 html 파일을 전달한다.
2. html 파일에 연결된 js를 다시 응답 받아서 동적으로 DOM을 생성한다.
장점
1. 서버 의존도가 낮기 때문에 첫 페이지 렌더링 이후 구동 속도가 빠르고 서버에 부하가 적게 걸린다.
단점
1. 사용자가 첫 화면을 보기까지 렌더링 시간이 오래 걸릴 수 있다.
2. html이 뼈대만 있기 때문에 SEO에 취약하다.
SSR(Server Side Rendering)
서버측에서 렌더링하는 방식으로, TTV와 TTI의 공백이 긴 편이다.
렌더링 방식
1. 브라우저의 요청에 서버에서 렌더링 준비를 마친 html 파일을 js 코드와 함께 전달한다.
2. 브라우저는 화면에 html을 띄우고 js를 다운로드 받아서 html에 연결한다.
장점
1. 초기 구동 속도가 빠르다. 단, TTV 시점에 바로 TTI가 가능하지는 않다.
2. SEO 최적화에 유리하다.
단점
1. 깜빡이는 문제가 발생한다.
2. 서버 의존도가 높기 때문에 서버에 과부하가 걸릴 수 있다.
SSG(Static Site Generation)
서버측에서 렌더링하는 방식으로, html을 미리 만들어두기 때문에 내용이 바뀔 일이 거의 없는 페이지에 적합하다.
정리
SPA와 MPA는 어플리케이션을 단일 페이지로 구현할 것인가 멀티페이지로 구현할 것인가의 문제이고, CSR/SSR(SSG)는 렌더링 비용을 어디서 지불할 것인가하는 문제이다.
출처
2. https://www.youtube.com/watch?v=YuqB8D6eCKE
3. https://www.youtube.com/watch?v=vM_zQLnlyKw
4. https://www.youtube.com/watch?v=iZ9csAfU5Os
댓글