CSR SSR 이해하기

MPA : 다중 페이지로 이뤄져 있어 변경사항이 있을 때마다 서버로 페이지를 요청합니다.

• 페이지를 이동할 때마다 서버로부터 새로운 html 파일을 내려받기 때문에 새로고침이 발생합니다.
  
• 웹에 사진, 영상, 인터렉션이 많이 생기고 복잡도가 높아지면서 성능 이슈가 생깁니다.
• SSR 방식 채택

AJAX의 등장

필요한 부분만 리로드 할 수 있게 해줍니다.

SPA : 단일 페이지로 이루어져 있어 갱신될 부분에 대해서만 데이터를 요청합니다.

• 새로고침이 발생하지 않아 사용자 경험이 좋습니다.

• CSR 방식 채택

  CSR & SSR

  CSR

  클라이언트 측에서 렌더링을 담당하는 것으로 첫 로딩에 빈 html 파일에 필요한 번들파일을 모두 다운로드 받습니다.

TTFB : 요청을 보내고 응답의 첫 번째 바이트가 도착하기까지의 시간이 빠르다
FCP : 사용자가 화면에 콘텐츠를 볼 수 있는 페이지 로드 타임라인의 첫 번째 지점은 좋지 않다.

SSR

• 서버측에서 렌더링될 페이지를 그려 클라이언트로 내려주는 방식입니다.

• FCP는 빠르지만, TBT(Total Blocking Time)이 발생합니다. (TBT FCP로부터 TTI 사이의 시간 )

  ※ TTI (Time To Interact) : 사용자가 페이지에서 상호작용이 가능하기까지의 시간

  SSR VS SSG Static Site Generation

  SSR : 요청할 때 즉시 만드니깐 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합합니다.

  SSG : 미리 다 만들어 두니깐 바뀔 일이 거의 없는 페이지에 적합합니다.

  CSR과 SSR의 장단점