CSR vs SSR

yhko1992·2021년 12월 27일
0

JAVASCRIPT - BASICS

목록 보기
16/18
post-thumbnail
                                        피슝~~~!

자 그럼 클라이언트와 서버에서 랜더링이 어떻게 차이가 나는지 살펴보자. 기준은 , "랜더링 해주는 위치" 에 있다.

SSR

무엇?
서버에서 HTML이 랜더링 된 결과(완성된 웹페이지)를 브라우저로 전달해준다. 때문에, 사용자가 새로운 URL로 이동해 새로운 웹페이지가 필요할 때, 서버에서 해당 URL의 모습에 맞는 웹 페이지를 다 그려준후에 브라우저로 내려준다.

장점

  • 검색엔진에 최적화 가능
    • 이미 완성된 HTML이 내려오기 때문에 검색 엔진/크롤러는 웹페이지에 방문하면 HTML을 보고 TAG등을 읽어가기가 수월하다.
  • 초기 페이지 로딩 속도가 느리지 않다.

단점

  • 새로고침이 발생하여 사용성이 저하된다.
    • 페이지가 이동될 때 마다 서버에서 완성된 HTML을 새로 받아오므로, 깜빡이는 현상이 발생
  • 중복된 로딩 발생.

CSR

무엇?
최초 페이지 로딩때만 서버로 부터 리소스(HTML,CSS,JS)를 받아온다. 그 이후의 사용자의 요청에 따라 새로운 데이터를 가져올 때만 서버와 통신한다. View의 랜더링은 클라이언트에서 담당한다.

그래서 페이지에 따라 그때그때 필요할때 서버에 api요청을 하여 JSON의 형태로 데이터를 받아온다. 그럼 받아온 데이터를 가공하는 것은 클라이언트 쪽에서 한다. 클라이언트가 가공하여 HTML에 뿌려주는 것이다.

내가 이때까지 로컬서버에서 해왔던 방식이다. 그리고 라우팅을 통해 페이지 이동시에 필요한 작업을 하게 한다.

장점

  • 초기 로딩 이후 페이지 반응이 빠르다.
    • 필요한 부분만 랜더링하면 되기 때문이다. 따라서 실시간으로 정보를 불러와 랜더링 해줘야하는 경우(페이스북, 인스타 같이) CSR이 더 유용할 수 있다.
  • 페이지 이동이 자연스럽다.(깜빡이는 현상이 없다)
  • 개발시 생산성이 증가된다.
    • 프론트의 경우 컴포넌트 별로 개발이 가능해짐

단점

  • 초기 로딩 비용이 크다.
    • 번들링 된 JS를 받아오느라 느려지는 경우가 있다 👉 이경우 WEBPACK의 code splitting으로 해결가능!
  • 검색엔진 최적화가 힘들다.
    • 대부분의 웹크롤러는 JS를 실행하지 못하기 때문
  • 보안의 문제가 있다.
    • SSR같은 경우 서버에서 관리하는 보안(세션 등)을 CSR에서는 클라이언트 측헤서 관리해줘야 하기 때문이다. 👉 secure-web-storage를 이용하면 됨.

마치며

  • 둘중 어떤 방식이 좋은지는 역시나 상황에 따라 달라진다. 각 방법의 장 단점을 잘 고려하여 적절하게 사용하면 됨.(넘나 당연하지만 넘나 중요한 포인트!)

출처
1. https://sudalkim.tistory.com/22
2. https://so-nerdy.tistory.com/129?category=962408

profile
'과연 이게 최선일까?' 끊임없이 생각하기

0개의 댓글