CSR과 SSR의 차이점

CSR(Client Side Rendering)

브라우저가 서버에 필요한 HTML과 static files을 요청한 후 로드되면 사용자의 상호작용에 따라 데이터(Dom)을 동적으로 렌더링한다. 이는 필요한 데이터만 서버측에게 요청해 받아온다는 뜻이다.

• 장점
  • 첫 로딩시에 HTML과 static files만 받고나면 최소로 필요한 데이터만 요청하고 렌더링하기때문에 사용자 UX가 뛰어나다
  • 위의 이유로 인해 서버에 요청하는 횟수가 훨씬 적어 서버 부담이 적다
• 단점
  • 첫 로딩시 모든 HTML, static files이 로드될때까지 기다려야 한다
  • SEO(검색엔진 최적화)문제가 발생할 수 있다

SSR(Server Side Rendering)

• 장점
  • 초기 로딩속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 확인할 수 있다
  • 모든 검색엔진에 대응하는 SEO가 가능하다
• 단점
  • 매번 페이지를 요청할때마다 새로고침이 발생하기 때문에 사용자 UX가 떨어진다(FOUC 현상)
  • 리다이렉션시 서버에 매번 요청을 보내야하기때문에 트래픽과 서버 부하가 커진다