[ CSR ( Client Side Rendering) ]

서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 기법

초기 화면 동작과정

1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청한다
2. 서버는 빈 페이지를 클라이언트에게 전달한다
3. 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 다운로드하여 최종적인 화면을 사용자에게 보여준다
4. 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행한다

장점

빠른 속도

브라우저 내에서 페이지를 이동하기에 상대적으로 페이지 간 이동 시 속도가 빠르며 필요한 내용과 수정된 데이터에 대해서만 교체를 하기에 속도가 빠름

사용자 친화적

새로고침이 없으므로 화면 깜빡임이 발생하지 않아서 사용자에게 친화적임

짧은 공백기간

TTV와 TTI의 공백기간이 짧다

• TTV(Time To View): 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
• TTI(Time To Interact): 사용자가 웹브라우저에서 인터랙션할 수 있는 시점

단점

• 초기 페이지 렌더링 속도가 느림
  (빈 페이지를 출력하고 스크립트의 링크에 따라 다운을 받기 때문이다)
• 검색엔진 최적화에 불리함
  (초기 페이지를 빈 페이지로 우선 보여주기 때문이다)

프레임워크

React

---

[ SSR (Sever Side Rendering) ]

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법

초기 화면 동작과정

1. 사용자가 브라우저에서 요청을 한다(최초 홈페이지 접속)
2. 클라이언트에서는 이를 확인하고 서버로 요청을 한다
3. 서버에서 데이터를 포함한 미리 구성된 정적 파일을 클라이언트에게 전달한다
   4, 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여준다

사용 목적

검색 엔진 최적화 (SEO)

검색 사이트(ex 구글, 네이버)에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화하는 기법

빠른 페이지 렌더링

빈 HTML 페이지를 받아 브라우저에서 그리지 않고 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간이 단축됨

통합 유지보수 모델

전체 앱을 개발하기 위해 동일한 언어와 선언적 컴포넌트 지향의 유지보수 모델을 사용할 수 있음

단점

• 프로젝트의 복잡도
• CSR에 비해 서버 부하가 큼
  (CSR 서비스보다 서버가 할 일이 많고 바빠서 트래픽이 많이 몰릴 경우 응답이 느려지거나, 메모리가 한도를 초과해 서버가 동작을 멈추게 될 수도 있다)
• 불필요한 인터넷 대역폭이 소모될 수 있음
• 페이지 요청마다 페이지 새로고침이 발생

프레임워크

Next.js / Vue.js