[TIL #59] SSR / CSR?

REACT - CSR인데 왜 SSR에 대해 물어볼까에 대한 고찰

> 간단한 웹서비스의 역사

📌 1세대 : 정적인 웹, Full html.

📌 2세대 : 동적 웹 (JavaScript). User Interaction 증가 => SSR

📌 3세대: SPA. Frontend / Backend의 구별.
웹사이트에서 구현해야될게 많아지면서 => CSR

• 기존 방식대로 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송하는 것이 아니라, 파일은 처음 한 번만 송수신하고 그 뒤로는 실시간 데이터만 주고 받는다.

• 제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JavaScript에서 필요한 데이터를 API 서버로부터 호출하여 필요한 화면을 dynamic 하게 새롭게 구성해주는 방식.

• HTML 태그 자체를 자바스크립트가 "동적으로 생성"

> CSR

html파일은 최초 한번만 부르고, 빈 html이 보이다가 js가 추가되면서 화면이 보이는 방식 => 우리가 사용한 리액트!

• 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드한다.
  (최초로 불러온 index.html의 내용은 비어있음!)

• js 파일의 다운로드가 완료된 다음, 해당 js 파일이 dom을 빈 html 위에 그리기 시작.

• 초기 렌더링 속도는 상대적으로 느리지만, 그 후 새로운 페이지 이동시 전환속도가 빠르다.

• 최초로 호출할 때만 html, js, css를 요청하고 이후에는 화면에서 "변화가 일어나야 하는 만큼"의 데이터만 요청하기 때문에 서버 부담이 적다. (백엔드 호출 최소화)

• 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라 JavaScript 차원에서 새로운 화면을 그려내는 것이다.

• 단점 : 검색 노출이 안된다
  👉 초기에 비어있는 html 상황인데 네이버, 다음 크롤러 안에는 JS 엔진이 없다.
  👉 but 구글 bot은 예외!
  (구글 크롤러는 JS도 지원하기 때문에 CSR임에도 SEO가 잘되는 예외😉)

> SSR

새로운 페이지로 이동할때마다 매번 서버에 요청하는 방식

• SEO 측면에서 유리

  • 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식. (CSR의 단점인 "첫 페이지 깡통" 상태를 극복)

• UX 측면에서 유리

  • CSR에 비해 페이지를 구성하는 속도는 늦어지지만,
    "전체적으로" 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
    (CSR은 필요한 변화만큼씩 보여주니까)

> 그렇다면 MPA vs SPA?

MPA

• 정적 웹사이트로 구성된 html 파일이 여러 개.
• html 자체가 만들어져서 날아오고 그걸 그대로 브라우저에 보여주는 방식.
• 페이지 이동 시 화면 깜빡임 O

SPA

• html 파일이 한 개(npm run build)
• 페이지를 이동하려고 하면 js 함수를 이용해 <div id="root" />의 내용을 싹 교체하는 것. (서버로부터 바꾸는게 X)
• 페이지 이동 시 화면 깜빡임 X

CSR(SPA장점) + SSR(SEO장점)? ⇒ Next.js

첫요청은 SSR로 보여주지만 (크롤러 입장에서 굿, SSR 장점)
그 다음부터는 js파일이 불러와서 기능이 구현된다. (CSR장점)

✅비유
음식 배달할때
조리해서 다 보내준다? SSR
비조리형으로 보내준다? CSR (한정된 화구로 많은 요청을 처리)

✅예시

• 관리자 페이지는 검색될 필요가 없기 때문에 CRA로 구성하는게 맞다
• 커머스사이트는 "검색노출 + SPA장점"을 위해 next.js로 구성하는게 맞다
• styled component를 SSR로 하면 힘든이유?
  styled component도 js파일안에 있기때문에 css가 js입장에서 출력되므로 부자연스럽다.(파바박)