🖥 서버 사이드 렌더링 제일 좋을까??

1) 1990년대 중반까지 Static Site

• 서버에 만들어진 HTML 문서가 존재
• 사용자가 브라우저에 주소를 입력하면 서버는 이미 배포되어진 HTML을 보여주는 형식
• 단점!: 페이지 내에 다른 링크 클릭 시 서버에서 다시 HTML 파일을 받아서 페이지 전체를 업데이트해야 함 -> 사용성 하락!

2) 1996년 iframe 태그

• 페이지 내에서 문서를 받아 업데이트 가능
• 문서 내 또 다른 문서를 담을 수 있는 태크

3) 1998년 XMLHttpRequest API 개발

• Fetch API의 원조
• HTML 문서 전체가 아니니 JSON 형태의 가벼운 데이터를 가져올 수 있었음
• 방식은 자바스크립트를 이용해 데이터를 동적으로 HTML 생성 -> 페이지 업데이트

4) 2005년 AJAX

• 공식적으로 이름 발표
• 구글에서 지메일, 구글맵과 같은 웹 어플리케이션을 만들기 시작
  • 현재 SPA(Single Page Application)
  • 사용자가 한 페이지에 머무르면서 필요한 데이터를 서버에 받아와 부분적으로만 업데이트 -> 사용성 증가

5) CSR(Client Side Rendering)

• SPA 트렌드, PC 성능 증가, 자바스크립트 표준화 등으로 커뮤니티 중심으로 Vue, React, Angular 와 같은 다양한 프레임워크 등장
• CSR 시대가 등장!
• 클라이언트에서 웬만한 처리를 함
  • 예제
    (1) 서버가 index.html를 클라이언트로 보냄
    (2) 간단한 구조로 구성되어 어플리케이션에 필요한 자바스크립트 링크만 들어있음
    (3) 서버로부터 해당 링크를 요청하고 받으면
    (4) 로직 뿐만 아니라 구동하는 데 필요한 프레임워크, 라이브러리 소스코드 포함
    (5) 초기 시간이 걸림
    (6) 추가로 필요한 데이터가 있는 경우에는 JSON 형태로 서버에서 받음
    (7) 앞서 말한 소스코드와 결합하여 동적으로 HTML 생성하여 어플리케이션 생성
• 단점!
  • 사용자가 첫 화면을 보기까지 너무 오래걸릴 수 있음
  • SEO가 좋지 않음
    • SEO(Search Engine Optimization) : 웹사이트를 빠르게 검색할 수 있도록 도와줌

6) SSR(Server Side Rendering)

• Static Site에 영감을 받고 CSR 단점들을 보완하기 위해 도입
• 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만듬
• 해당 HTML 파일을 동적으로 제어할 수 있게 하는 소스코드를 클라이언트에 보냄
• 바로 사용자에게 보여줄 수 있음
• 첫 페이지 로딩이 빠름
• 모든 컨텐츠가 HTML에 담겨져있기 때문에 SEO 효율적으로 할 수 있음
• 단점
  • 깜박임 이슈
  • 서버 과부하가 걸리기 쉬움
  • 사용자가 동적으로 처리하는 자바스크립트 코드를 받지 못하는 상황에서 동작을 처리할 때 아무 반응이 없는 경우 발생

7) TTV(Time to View), TTI(Time to Interactive)

• CSR은 TTV와 TTI가 동일
  - 소스코드를 잘 분할해서 필수적인 요소만 보낼 수 있도록 고민해야 함
• SSR은 TTV가 먼저 TTI은 나중에
  - 시간의 단차를 줄이기 위한 제공 방법에 대해서 고민
  

8) SSG(Static Site Generation)

• 리액트 + 개츠비
• 기본적으로 정적이지만 동적인 요소도 추가 가능
• Next.js출처 : https://www.youtube.com/watch?v=iZ9csAfU5Os