SSR vs CSR , SEO문제 해결

이번 포스팅은 SSR과 CSR, 그리고 이를 통해 SEO문제를 어떻게 해결하는지 정리하고자 한다.

먼저 SSR과 CSR.
간단하게 말하면 HTML파일을 어디서 받아오는가의 차이 이다.
SSR은 서버 사이드 렌더링 즉 이름에서도 알 수 있듯이 HTML 렌더링 위치가 서버.
CSR은 클라이언트 사이드 렌더링 즉 클라이언트 쪽에서 HTML 렌더링이 된다.
* 여기서 렌더링의 의미는 조금 얕게 보자. 원래라면 HTML CSS JS파일을 가져와서 파싱하고 paint하는 작업이라면 여기서는 HTML 내용이 있는 채로 주고 있는 것인가? 로 해석하자.

단계를 살펴보면
1 SSR
서버가 브라우저의 요청에, 렌더링된 HTML을 응답한다 -> 브라우저는 이 렌더링된 HTML을 viewable하게 만든다 동시에 JS 파일 다운로드 -> 브라우저의 리엑트 실행 -> 비로소 페이지의 상호작용 가능

2 CSR
서버가 브라우저에 응답(렌더링 x) -> 브라우저의 JS파일 다운로드 -> 브라우저의 리엑트 실행 -> 비로소 viewable 및 상호작용 가능

viewable의 위치에 주목하자. SSR은 서버에 응답받고 가능 CSR은 마지막 단계에 가능.

실제로 CSR은 개발자 모드를 켜서 서버에서 응답 온 localhost파일을 보면 프리뷰에 html내용이 담겨있는 것을 볼 수 있다.

그렇다면 이는 SEO 즉 검색엔진최적화와 무슨 관련이 있을까 간단하다. CSR은 자바스크립트를 다운로드 받고 마지막 단계가 되서야 viewable하다. 그러므로 검색엔진이 돌아다니며 검색 결과를 탐색이 불가능하다. SSR은 서버응답을 받은 후, 자바스크립트 파일을 다운 전 viewable하기에 탐색이 가능하고 검색엔진최적화가 가능하다.