[HTTP/네트워크] SSR&CSR 표 하나로 정리

🍻 SSR(Server Side Rendering) VS CSR(Cliden Side Rendering)

 

SSR	CSR
웹페이지를 서버에서 렌더링 브라우저가 서버의 URI로 GET요청 ➡️ 서버가 웹페이지 렌더링 ➡️ 서버가 렌더링한 웹페이지 파일 브라우저로 전송 ➡️ 브라우저가 보여줌	웹페이지를 클라이언트(브라우저)에서 렌더링 브라우저가 서버의 URI로 GET요청 ➡️ 웹페이지의 골격이 될 단일 페이지(Single Page) & 자바스크립트 파일을 보냄 ➡️ 브라우저가 받아서 자바스크립트 파일을 실행시킴 ➡️  완전히 렌더링된 페이지로 바꿈
웹페이지의 내용에 데이터베이서가 필요한 경우 ➡️ 서버에서 데이터베이스의 데이터 불러옴 ➡️ 완전히 렌더링된 페이지로 변환 ➡️ 브라우저에 응답으로 보냄	웹페이지의 내용에 데이터베이서가 필요한 경우 ➡️ 브라우저가 자바스크립트 실행할 때 자바스크립트 내의 fetch와 같은 API로 데이터 가져와서 렌더링
웹페이지에서 다른 페이지로 이동시 서버가 같은 작업 수행	서버가 웹페이지 다시 보내지 않고, 브라우저가 알아서 처리
-SEO(Search Engine Optimization)가 중요할 경우 -첫화면 렌더링이 빨라야 할 경우 -사용자와 상호작용이 적은 경우	-SEO가 우선순위가 아닌경우 -사이트에 상호작용 많은 경우(빠른 라우팅) -웹 애플리케이션을 제작하는 경우(빠른 동적 렌더링)
네이버 블로그, The NewYork Times	티스토리블로그, 아고다(등의 상호작용이 많은 예약사이트)

 

개인적으로 티스토리는 구글 검색을 주타겟으로 하는데, 리액트와 CSR을 사용하고 있고,

네이버는 주로 네이버 블로그를 우선으로 검색 최적화를 하는데, SSR을 사용하고 있다는 점이 신기했다.

구글이 CSR에도 대응하게끔 검색봇을 발전시켰다는데, 그런 이유때문인가 싶기도하고... 

당장에 내 티스토리 블로그만해도 구글 유입이 대다수인지라.. 

재밌는 사실 같다.🫢

 

CSR 서버: 어휴... 알아서 나가서 렌더링 하든지 말든지