1. 웹의 역사와 발전

(1) 1세대 웹 - 전통적인 Web System Architecture (정적인 웹)

• 웹 서버가 html 페이지 전체를 클라이언트에게 전송하는 방식
• 초창기 웹 사이트는 단순한 정보를 제공하는 것에 목표를 두었고, 특별한 기능이 요구되지 않았다.
• 정적인 이유 : html과 CSS 자체가 정적이며, 로직이 따로 없다.

(2)2세대 웹 - User Interaction 의 증가 (동적 웹)

• 웹 서비스들의 발전으로 동적인(다이나믹 요소)페이지들이 요구되었고, 자바스크립트(웹 기반의 언어)가 출현했다.
• 웹 서버에서 전체 html 페이지 뿐만이 아니고, JavaScript를 통해 서버와 필요한 데이터만 주고 받아서 User Interaction 구현

(3) 3세대 웹 - SPA(Single Page Application) - 구별되기 시작하는 Frontend와 Backend

• 기존의 방식대로 서버가 페이지 구성에 필요한 모든 요소를 매번 전송하지 않고, 처음 한 번만 송수신하고 그 이후로는 실시간 데이터만 주고 받게 되었다.
• HTML 태그 자체를 자바스크립트가 동적으로 생성.
• Frontend(HTML/JavaScript) 와 Backend(Data)가 구조적으로 분리되며, 개발 업무가 분리되는 구조로 발전되었음.

2. SPA와 MPA

(1) Single Page Application(SPA)

• 하나의 html파일로 이루어진 애플리케이션을 뜻하고, 초기 요청시 서버에서 첫페이지를 처리하고, 이후 라우팅은 클라이언트(브라우저)에서 처리하는 웹 애플리케이션
• 페이지 이동 시 화면 깜빡임 없음

(2) Multi Page Application(MPA)

• 정적 웹사이트로 구성된 html 여러가지 파일로 이루어진 방식으로 html 자체가 만들어져서 날아오고 그대로 브라우저에 보여주는 방식
• 페이지 이동시 깜빡임 있음
• 한 번 만들어두면 거의 바뀌지 않는 페이지

3. CSR과 SSR

(1) Client Side Rendering(CSR)

• 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것
  (SPA와 연관이 있음)

• 최초 요청에서 html(html,body태그만 존재), js, css 확장자 파일을 차례로 다운로드

• js 파일의 다운로드가 완료되면 해당 js 파일이 dom을 빈 html 위에 그린다.

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

• 장점
  - 서버측에서 발생할 수 있는 성능상의 문제를 해결해준다
  - 사용자가 화면을 볼 때 불필요한 로딩이 생기지 않는다.

• 단점
  - 앱의 규모가 커지면서 자바스크립트 파일이 커진다.
  - 검색엔진 최적화(SEO) 문제가 발생한다.

(2) Server Side Rendering

• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식

• 장점
  - 서버를 이용해서 페이지를 구성하기 때문에 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
  - 검색엔진 최적화(SEO) 문제를 해결할 수 있다.

• 단점
  - 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦다.
  - 사용자의 요청이 많이 발생하면 서버측의 성능상의 문제가 발생할 수 있다.
  

(3) CSR 과 SSR 함께 사용하기

• 첫 렌더링을 SSR 그 뒤는 CSR이 진행할수 있도록 하는 방식
  

• SSR 구성요소
  - FE Server (node.js)
  - BE Server (python, django)

• 진행과정
  브라우저에서 프론트엔드 서버로 요청 👉 백엔드 서버에서 데이터 패칭 👉 SSR 진행 👉 브라우저가 응답을 받은 html을 그림 👉 html에 기능을 부여할 index.js 파일 받음(hydration) 👉 다운로드 완료 후 링크 클릭 👉 라우팅하고 페이지 코드 생성