[배포] CSR과 SSR의 차이

기술 영역: SPA

SPA는 Single Page Application의 약자이다.
이에 대해서는 따로 포스팅을 할 예정이다.
이후 링크를 붙이도록 하자
이 SPA 영역에서 다룰 수 있는 질문, CSR과 SSR의 차이는 무엇일지 생각해보고 정리하기로 했다.

관련 영역: SEO

SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화라고 불리운다.
이에 대해서는 따로 포스팅을 할 예정이다.
이후 링크를 붙이도록 하자

CSR과 SSR의 개념적 차이와 동작 방식을 구분하여 설명해주세요.

CSR

CSR의 개념

CSR은 Client Side Rendering의 약자이다.
말 그대로 해석하면 클라이언트(브라우저) 측에서 렌더링을 한다는 의미인데, 동작 과정은 이러하다.

HTML 다운로드 » JS 다운로드 » JS 실행 » API 서버로부터 DATA 받기 » Content 확인 가능

즉, 최초 로딩 시 브라우저가 서버에 HTML을 비롯한 CSS, Javascript 등 각종 리소스들을 받아오는 방식이다.
이러한 구조로 인해 초기 로딩 속도가 느린 것이 단점이지만,
빠른 페이지 전환 속도를 제공하며 서버 요청 수도 적다 보니 서버에 부담이 적다.

CSR의 예시

• Agoda 사이트
• Google 검색
  

CSR의 장점

• 사용자가 다른 경로로 페이지를 요청할 때 전체 새로 불러들이지 않고(새로고침하지 않음!) 필요한 부분만 변경하기 때문에 빠른 속도로 렌더링이 가능하다. = 동적으로 라우팅 관리, 빠른 인터랙션
  • 이로 인해 상대적으로 느린 모바일 네트워크에서도 빠른 렌더링 제공한다.
• 서버 요청 횟수가 적어 서버 부담이 적다.
• Lazy loading을 제공한다.
  • Lazy loading은 우리말로 ‘지연된 로딩’이란 말로 쓰인다. 필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나로, 예시를 들자면 스크롤을 해야 추가로 로딩되는 구글 이미지 검색이 있다.
• 사이트에 풍부한 상호 작용이 있는 경우, 빠른 라우팅으로 사용자에게 강력한 경험을 제공한다.
  
  

CSR의 단점

• 초기 로딩 속도가 느리다.
• 화면에 보이는 html의 컨텐츠가 비어 있기 때문에 SEO가 안 좋다.
  • 초기 데이터가 없기에 크롤링을 할 수 없다. ( = 크롤러가 데이터를 수집하기에 부적합하다.)
• 사용자의 정보를 쿠키에 저장하기에 보안에 적절하지 않다.

SSR

SSR의 개념

SSR은 Server Side Rendering의 약자이다. CSR과 달리 서버에서 렌더링한다는 의미이다. 동작과정은 CSR에 비해 간결하다.
HTML 다운로드 » Content 확인 가능

SSR은 전통적인 웹어플리케이션 렌더링 방식으로, 사용자가 웹페이지에 접근할 때마다 서버에 페이지 요청을 한다.
서버는 요청을 받을 때마다 렌더링을 하여 사용자에게 반환한다. 이로 인해 브라우저는 새로고침을 하게 된다.
예전에는 뭔가 버튼을 누를 때마다 전체가 깜빡이는 웹페이지를 확인할 수 있었는데 그게 바로 새로고침됐다는 것이다.

SSR의 예시

• 네이버 블로그
• The NewYork Times
  
  

SSR의 장점

• 초기로딩속도가 빠르다.
  • 웹페이지 첫 화면 렌더링이 빨라야 할 경우 사용하기에 적당하다.
• 초기 데이터를 포함하고 있기에 SEO에 적합하다.
  • 크롤러가 데이터를 수집하기에 적합하다.
• 사용자 정보를 서버에서 세션으로 관리하기에 CSR보다 보안성이 높다.
  

SSR의 단점

• 페이지 전환 시마다 서버에 요청하기에 서버의 부하가 커진다.
  
  
  

카카오페이로 커피사기 ❤️ 토스 계좌로 커피사기 ❤️