그래서 CSR,SSR은 뭐가 다른데

먼저 렌더링에 대한 정의를 알아야 한다

렌더링

---

브라우저에 html,css,javascript를 이용해서 웹페이지를 그린다

렌더링 방식 (CSR, SSR)

---

렌더링 방식에는 CSR,SSR이 있다

CSR

---

• 클라이언트가 모든 렌더링을 도맡아서 한다

  순서

  1. 클라이언트가 서버로 웹페이지 요청을 보낸다
  2. 서버는 빈 html,js링크를 클라이언트로 보낸다.
  3. 클라이언트가 js링크로 js를 다운받는다.
  4. 다운받은 js로 화면을 그린다.
  5. 웹페이지 완성

  장점

  1. 페이지 이동시 새로고침이 발생하지 않음
  2. 초기로드 이후 html,js를 다시 받아오는 것이 아님으로 속도가 빠름
  3. TTV와 TTI에 차이가 없어 사용자 경험이 좋음
  4. 클라이언트에서 렌더링을 함으로 서버부하가 낮아짐

  단점

  1. 초기 로드시간이 오래걸림
  2. 검색엔진최적화(SEO)가 어려움

SSR

---

• 서버에서 html을 렌더링해서 클라이언트에 보내고 hydration을 진행한다.

  순서

  1. 클라이언트가 서버로 웹페이지 요청을 보낸다
  2. 서버에서 데이터가 넣어진 렌더링을 마친 html과 js를 보낸다
  3. 클라이언트는 먼저 렌더링된 html을 화면에 그린다
  4. 클라이언트는 나중에 전달받은 js를 html에 hydration한다
  5. 사용자와 상호작용이 가능한 웹페이지 완성

  장점

  1. 초기 로드시간이 빨라 사용자 경험이 높아짐
  2. 검색엔진최적화(SEO)가 뛰어남

  단점

  1. 페이지 이동 시마다 서버에서 페이지생성해야 함으로 서버부하가 생김
  2. 페이지 이동시 화면 깜빡임 발생
  3. TTV와 TTI에 차이가 생겨 사용자 경험이 떨어질수있음

Hydration

---

• 서버로부터 전달받은 html파일을 그대로 클라이언트가 실행을 시키고 이후에 클라이언트가 javascript를 넘겨받으면 이를 html에 이벤트를 연결한다.

  특징

  1. hydration과정이 진행되어야 html에서 버튼클릭 등 상호작용을 할 수 있다
  2. hydration전에는 사용자가 버튼클릭을 해도 눌리지는 않는다.

마무리

---

최근 ssr에 대한 글들이 많이 올라오는 추세여서 뭔가 ssr이 만능인거 같지만
각각의 장단점들이 존재하기 때문에 휩쓸려서 ssr을 쓰는거 보단 잘 따져보고 써봐야 한다.