2021.7.16(fri)_SSR, CSR

📌 CSR(Clinet Side Rendering)

• body 안에 id="root"만 들어있음
• 서버에 HTML 요청
• 텅텅 빈 HTML 받음
• HTML에 링크된 js파일 요청
• 모든 소스코드가 들어있는 js 받아 렌더링
  • 로직, 프레임워크, 라이브러리의 모든 소스코드: 사이즈 크고, 오래 걸림
  • 필요한 데이터를 서버에 요청해서 동적으로 HTML 생성
• viewable(TTV), interactable(TTI)

단점

1. 첫 화면을 보기까지 오래 걸림
2. 좋지 않은 SEO(Search Engine Optimization)
   • 검색 엔진은 웹사이트의 HTML 분석을 하게 되는데, CSR HTML body는 텅텅 비어있어 분석하는 데 어려움

📌 SSR(Server Side Rendering)

• 서버에서 필요한 데이터 모두 가져와서 HTML 만듦
• 서버에 HTML 요청
• 데이터가 다 들어있는 HTML 받음
• viewable(TTV), 그러나 사용자의 이벤트에 반응X
• js 파일 요청
• 소스코드 들어있는 js 받음
• interactable(TTI)

장점

1. 빠른 페이지 로딩
2. 효율적 SEO
   • 모든 컨텐츠가 HTML에 담겨 있기 때문

단점

1. TTV, TTI의 시간차가 있어 사용자가 클릭을 해도 반응하지 않는 경우 발생
2. 깜박임 이슈: 클릭 시 전체 업데이트를 서버에서 받아오기 때문
3. 서버 과부하 가능성 - 사용자가 많을수록 서버 요청이 많아서