CSR (Client Side Rendering) & SSR (Server Side Rendering)

정의와 특징

• SSR(Server Side Rendering)
  • 사용자가 요청할 때마다 서버에서 렌더링, 페이지(html) 다 생성해서 보내줌 -> 새로고침 필수
  • 페이지 별로 구분 가능(link 다 다름)
• CSR(Client Side Rendering)
  • 서버는 빈 페이지(html)만 제공해주고, 나머지는 javascript로 클라이언트 단에서 직접 렌더링
  • SPA(Single Page Application)
    • 최초의 페이지만 로딩한 이후에는 데이터만 변환해서 쓸 수 있는 애플리케이션
    • 필요한 데이터를 가져와서 필요한 부분만 재렌더링
    • 새로고침 없이 페이지 전환 가능, 네이티브 앱의 느낌을 줄 수 있음

차이점

• SEO (Search Engine Optimization) (SSR > CSR)
  • SEO란 구글, 네이버에 있는 검색 엔진들이 콘텐츠를 이해하도록 돕고(크롤링+이해), 사용자가 사이트를 찾게 하고 등등의 역할을 제대로 수행하도록 최적화 하는 것
  • 내가 따로 구글 검색 엔진에 뭘 올리지 않아도 구글 검색 엔진이 알아서 내 페이지를 웹 크롤링 후에 -> 누가 검색하면 검색어에 알맞게 정보들을 보여줌
  • 내가 만든 페이지의 사용자를 끌어모으려면 SEO도 무시할 수 없음
  • SSR은 서버에서 페이지를 만들어서 html로 제공하는 것, CSR은 서버는 빈페이지만 제공하고 js로 클라이언트가 직접 렌더링하는 것이므로 그냥 웹 크롤링으로는 CSR을 읽으면 빈 페이지 밖에 안 나옴, CSR이 불리
    • 구글은 그래서 js 엔진을 탑재해 이런 사이트들도 읽을 수 있게 하고 있음. 네이버랑 다음은 X
• 초기 구동 속도 (SSR > CSR)
  • SSR은 완성된 html을 제공해주기 때문에 그냥 서버에서 페이지 받아서 브라우저에서 보여주면 됨
  • CSR은 필요한 리소스를 모두 미리 다운받아 놓아야 그 다음부터 필요한 곳을 재렌더링 할 수 있음
    • 그래서 초기구동속도는 SSR이 더 빠르지만, CSR은 리소스를 다운받아 놓고 나면 그 다음부턴 페이지랑 직접 인터렉션이 가능함
• 페이지 링크 (SSR > CSR)
  • SSR은 페이지마다 고유 url이 있어서 history관리나 SEO에 문제가 없음
    • 페이지마다 html이 다 짜여져있고 그게 서버에서 나오니까
  • CSR은 한 페이지에서 모두 처리하기 때문에 뒤로가기 X , SEO에도 문제
    • 다만 react에서는 SPA라고 꼭 한 페이지만 있는 것은 아니고, react-router 라이브러리로 주소 부여 가능

• 성능 (SSR < CSR)
  • 요즘은 웹에서 제공하는 정보가 워낙 많기 때문에 새로고침을 할 때마다 서버에서 새로 만들어서 가져오면 성능 문제를 유발할 수 있음

 

결론

차이점만 보면 SSR이 더 좋아보이지만..

데스트탑보다 모바일 사용량이 더 늘어남 -> 네이티브 친화적, 더 낮은 성능의 모바일에서도 굴릴 수 있어야 함

제일 큰 성능 때문에 CSR로 변화하고 있는 추세인 것 같다.

실제로 CSR의 단점들(링크, SEO 등)도 개선하고 있는 것 같음

---

참고

https://jaroinside.tistory.com/24

https://velog.io/@zansol/%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81SSR-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81CSR