CSR과 SSR의 가장 큰 차이의 시작은 서버에서 렌더트리를 구성하기 위한 리소스를 받을 때 데이터가 비어있는 상태로 HTML을 파싱하는지, 데이터까지 전부 삽입하여 완성된 HTML을 파싱하는지 부터 시작합니다.
CSR 같은 경우
데이터가 없는 빈 HTML만 받아오고, JS, CSS파일을 불러올 수 있는 링크를 통해 JS, CSS를 다운로드가 된 후 브라우저의 렌더링 과정을 거쳐 브라우저에 띄어주게 됩니다.
1. -> CSS, JS파일이 링크를 통해 다운로드 받고 처리하는 시간이 필요하기 때문에 초기 로딩 속도가 느립니다.
2. -> 흔히 흰색창을 보게 되는 원인이기도 합니다.
-
하지만 초기 로딩 이후에 페이지 일부를 변경시에는 서버에 해당 데이터만 요청하면 되기 떄문에 이후 구동 속도는 빠르다.
-
마지막으로
SEO에 불리하다 : 브라우저들이 가진 웹 크롤러 봇들이 본 HTML은 텅텅 비어져 있다. 검색엔진들이 색인을 할만한 컨텐츠가 존재하지 않기 때문입니다.
SSR 같은 경우
서버에서 데이터까지 전부 삽입하여 완성된 HTML을 브라우저에 응답으로 전달하게 됩니다. -> 데이터까지 전부 삽입된 HTML을 바로 렌더하기 때문에 JS코드를 다운 받고 실행하기 전에 사용자가 화면을 볼 수 있는 장점이 있습니다.
1. -> 따라서 첫 로딩이 매우 짧습니다.
2. 또한 모든 데이터가 HTML에 담겨진 채로 브라우저에 전달 되기 때문에 SEO에 유리합니다.
-> JS를 실행 할 줄 모르는 크롤러 봇들도 무리없이 HTML을 읽을 수 있기 때문이다.
단점
1. 새로운 페이지를 이동하면 ‘깜빡’인다. (UX)
매 페이지 요청마다 리로딩(새로고침) 발생.
-> 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.
2. 서버 렌더링에 따른 서버부하
결론적으로
실제 서비스에서는 회사 홈페이지나, 항상 같은 내용을 보여줘야하는 페이지, 하지만 일정한 주기로 정기적으로는 업데이트가 필요한 페이지에서 유용합니다.
