CSR & SSR

SPA(Single Page Application)

• 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것

• 과거의 웹사이트는 유저의 작동에 따라 매번 새로운 페이지를 서버에서 전송해줬음(SSR)
  -> 페이지 용량이 커짐에 따라 유저의 클릭한번에 새로운 페이지를 로딩하는게 버거워졌음
  -> SPA의 탄생배경!!

• 화면 이동시 필요한 데이터를 서버에서 HTML로 전달받지 않고 필요한 데이터만 서버로부터 JSON으로 전달받아 동적으로 렌더링한다.
  

SSR(Server-Side Rendering)

• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
• JSP/Servlet의 아키텍처에서 이 방식을 사용했었음
• 서버를 이용하여 페이지를 구성하는 특징때문에 CSR 보다 페이지 구성속도는 늦지만 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라짐
• 하지만 인터랙션이 많은 최근의 사이트 특성상 요청할 때마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하는 SSR은 비효율적!!

※ 렌더링 : 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정(HTML다운 -> DOM트리 생성 -> 렌더링트리 생성 -> 화면에 표현)
※ JSP : HTML 안에 자바코드를 삽입하여 웹서버에서 동적으로 웹페이지를 생성하여 웹 브러우저에 돌려주는 서버사이드 스크립트 언어
※ Servlet : 자바코드를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램

CSR(Client-side Rendering)

• 최초 요청시에 HTML을 비롯해 CSS, JS 등 각종 리소스를 받아옴. 이후에는 서버에 데이터만 요청하고 JS를 사용하여 뷰를 컨트롤하는 방식(화면을 그리는 것을 클라이언트 측에서 수행).
• React, Vue 등으로 구현
• 단 한번 렌더링을 하기 때문에 페이지 이동시 SSR보다 빠른 페이지 전환 속도를 제공
  하지만 초기요청때는 SSR보다 많은 리소스를 요청하기 때문에 처음에는 SSR보다 느림!(HTML 다운 + JS 파일 다운 + 브라우저 렌더링)
• SEO(Search Engine Optimization)문제 발생!
  -> SEO : 웹페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색결과의 상위에 나올 수 있도록 하는 작업
  -> CSR은 처음에 HTML에 div만있고 데이터가 없다보니 빈페이지로 착각하여 SEO 최적화에 취약할 수 있는 단점이 존재(JS파일을 실행시키지 못해서)
  -> SSR with Hydration 기법이 탄생!(Next.js, Nuxt.js...)
  

SSR Vs CSR

• SSR 장점
  1. SEO 최적화를 수행할 수 있다.
  2. 초기 로딩시 CSR보다 속도가 빠르다.
• SSR 단점
  1. 페이지 이동시 화면이 깜빡인다(과거에는 많이 생겼으나 최근에는 네트워크가 발전하면서 많이 생기진 않음)
  2. 서버 렌더링에 따른 부하가 생긴다(변경되지 않는 부분도 새로 렌더링)
     -> 성능이 CSR에 비해 떨어진다
  3. 모바일 앱 개발시 추가적인 백엔드 작업이 필요하다(모바일 앱에 맞는 화면을 새로 만들어 제공해야 한다)
     
     
• CSR 장점
  1. 서버와 클라이언트 간의 데이터 양과 트래픽이 현저히 감소된다.(필요한 데이터만 받기 때문에)
  2. 단 한번의 렌더링만 있으므로 페이지 이동이 빠르다(전체 화면을 새로 렌더링 하는 것이 아니라 변경 부분만 부분적으로 로딩)
  3. 컴포넌트별 개발 용이(페이지에서 부분적으로 변경되므로 개발부분만 테스트해가며 개발 가능)
  4. 모바일 앱 개발시 동일한 API를 사용하도록 설계 가능(페이지 전달이 아닌 JSON을 사용한 데이터 전달이기 때문에)
• CSR 단점
  1. JS 파일을 번들링해서 한번에 받기 떄문에 초기 구동속도가 느림(최근에는 Code Splitting이라는 것으로 해결)
  2. SEO가 어려움(SSR with Hydration 기법을 사용해서 해결)
  3. 보안문제(SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리, 하지만 CSR의 경우 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않음)