CSR, SSR 톺아보기

CSR

장점

• 초기 페이지 로딩 속도가 빠르다.(여기서 초기로딩이란 비어있는 HTML을 받는 시간을 의미한다)
• 서버에는 부하가 가지 않는 렌더링 방법이다.
• 초기 로딩 이후 페이지 전환 시에는 기존 페이지에서 변화되는 요소만 요청하기 때문에 전환속도가 빠르며 부드럽다.

단점

• 전체 페이지로딩 완료 속도는 다소 느리다

  • 여기서 최종적인 페이지 로딩이란 사용자가 화면 내 모든 요소를 볼 수 있을때를 의미
  • 따라서 로딩바가 발생할 수 있음
    • 근데 요즘에는 생각보다 컴퓨팅 성능이 좋아서? 크게 체감이 안될 수 있긴 하다.

• 검색엔진 최적화에는 불리할 수 있다.

  • SEO가 주로 노출 되는 메인페이지는 CSR이 불리할 수 있다.

  • 검색엔진이 볼 수 있는 페이지(아래 사진에서 각각 SSR, CSR)

    • 다만 구글 봇은 JS 실행도 가능하다

    

SSR

• 특징 : 서버가 렌더링의 책임을 가진다.
  • 유저가 페이지를 요청하면 서버가 페이지를 만들어서 클라이언트에게 제공한다.
  • 유저 입장에서는 페이지를 따로 로딩할 필요없이 페이지를 바로 볼 수 있다.

장점

• 처음에 전체 페이지가 보이는 속도는 CSR보다 빠르다. (HTML내 DOM요소를 만들어주는걸 서버가 미리 해주니까 → 이걸 Pre-rendering 이라고 한다.)