csr(client-side-render)와 ssr(server-side-render)차이

서버에서 렌더링을 해주는 ssr방식은 화면이동간 깜빡깜빡거리는 끉김이 있어 사용자 편의성이 떨어집니다.

페이지 이동이 매우 부드러운 앱의 등장으로 웹 생태계도 발전이 필요했고, spa(single-page-application)이 등장하게 됩니다.

 

spa는 주로 csr(client-side-render)방식으로 client측에서 렌더링을 해줍니다.

클라이언트에서 스크립트를 통해 html태그들을 떼었다 붙이죠. 하지만 csr방식은 초기로딩속도가 너무 느리고, seo가 약하다는 단점이 있습니다. 

 

ssr:

@ SEO(검색 엔진 최적화) good

@ 초기로딩 속도 빠르다

@ 서버에서 렌더링

 

csr:

@ SEO(검색 엔진 최적화) bad

@ 초기로딩 속도 느리다.

@ 클라이언트에서 스크립트로 렌더링

 

*렌더링 => html태그 생성, 으로 생각하면 이해하기 편하실겁니다.

 

두 방식에서 초기로딩속도는  클라이언트에서 렌더링하는 csr이 느린건 알겠는데,

seo?? 응?? 검색엔진??;;

 

 

SEO(검색 엔진 최적화)란 네이버와 구글에서 검색시 내 사이트를 상위 순위로 노출되게끔 하는 것인데요. seo가 잘되어 있으면 다른 사이트보다 상위순위로 노출되게 됩니다.

 

 

자 그런데 ssr과 csr의 차이로 seo가 잘되고 안된다 했는데, 이건 무슨 얘기일까요?

 

 

보통 웹페이지의 seo는 html head에 meta태그를 넣음으로써 seo가 가능하게끔 합니다.

csr은 index.html 한곳에서만 meta태그를 설정해줄수 있어 메인페이지 한곳에 대해서만 노출이 가능합니다.

 

하지만 ssr은 각 페이지별로 노출이 가능하고 이는 사이트의 메인 페이지뿐만아니라 상세페이지에 대해서도 노출이 가능합니다.

 

 

웹사이트를 만든다면 모든 페이지를 노출시킬수 있는 ssr을 무시 못하겠네요;;

 

 

 

요약:

@ ssr:

  =>SEO(검색 엔진 최적화) good

  => 초기로딩 속도 빠르다

  => 서버에서 렌더링

 

@ csr:

 => SEO(검색 엔진 최적화) bad

 => 초기로딩 속도 느리다.

 => 클라이언트에서 스크립트로 렌더링

 

끝!

 

 

 

 

위 글이 보시기 어려우시면 이 링크를 참조해주세요:

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/csr-client-side-render-%EC%99%80-ssr-server-side-render-%EC%B0%A8%EC%9D%B4-a6daa0781905