SSR 과 CSR

SSR (Server Side Rendering)

서버 쪽에서 렌더링 준비를 끝낸 상태로 클라이언트에게 전달하는 방식

 

서버에서 이미 렌더 가능한 상태로 클라이언트에게 보내주기 때문에 JS가 다운로드되는 동안 사용자는 무언가를 보고 있을 수 있음

 

장점

• 검색엔진 크롤러가 html에 접근하기 쉽다 -> SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR을 사용
• 웹 페이지의 첫 화면 렌더링이 빠르다 -> 단일 파일의 용량이 작음
• 웹 페이지가 사용자와 상호작용이 적은 경우 활용 가능

단점

• 자원이용이 서버에 집중되어 유지비용이 높음
• 일부 서드파티 자바스크립트 라이브러리의 경우 불가능할 수 있음

---

CSR (Client Side Rendering)

서버가 클라이언트에게 HTML과 JS를 보내주면 클라이언트 쪽에서 렌더링이 일어나는 방식

 

장점

• 사이트에 풍부한 상호작용이 있는 경우, 빠른 라우팅으로 강력한 사용자 경험을 제공
• 웹 애플리케이션을 제작하는 경우, 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공

단점

• 느린 렌더링 속도로 사용자 경험이 떨어질 수 있음 -> 모든 렌더링의 부하가 클라이언트 쪽에 집중되기 때문에 사용자에 따라 경험이 달라질 수 있음
• Search Engine Bot들과 상성이 안 좋음 -> 검색 엔진에 포함이 안될 가능성이 높음

---

SSR vs CSR

	SSR	CSR
첫 페이지 로딩 시간	빠름	느림
나머지 로딩 시간	느림	빠름
서버 자원 사용	더 많이 사용	더 적게 사용

---

SSR이 SEO(검색엔진 최적화)에 유리한 이유?

글의 제목과 내용이 그대로 노출되고 있다

블로그의 네트워크 탭을 보면 html 파일에 내용이 똑같이 담긴 상태이다. 구글, 네이버 같은 검색엔진 크롤러가 html에 접근하여 쉽게 내용을 가져갈 수 있다

 

블로그 같은 경우 검색엔진에 최대한 노출되는 것이 유리하며, 다른 웹사이트에 비해 사용자와 상호작용이 적기 때문에 SSR이 합리적일 수 있다

---

 

추가로 참고하면 좋은 글

https://velog.io/@vagabondms/기술-스터디-SSR과-CSR의-차이

[ 기술 스터디 ] SSR과 CSR의 차이