MPA vs SPA
🔸MPA
Mult page application의 약자로 여러 페이지로 구성된 웹 어플리케이션입니다.사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을
받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.
🔸SPA
Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 입니다.
브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다.
단일 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드로 볼 수 있고, 우리가 배운 react와 vue, 앵귤러와 같은 자바스크립트 프레임워크등이 spa의 방식을 가지고 있습니다.
🌱 SSR
Server Side Rendering의 약자.
말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
1. 클라이언트가 특정 페이지를 요청한다.
2. 서버에서는 해당 페이지에 필요한 데이터를 포함한 HTML 파일을 클라이언트에 전달한다.
3. 클라이언트에서는 해당 HTML 파일을 파싱하면서 필요한 정적 리소스(CSS, 이미지 등)와 자바스크립트 파일을 다운로드하며, 페이지를 렌더링한다. 이 때 사용자는 렌더링된 페이지를 볼 수는 있지만 아직 클릭 등의 인터렉션은 할 수 없다.
4. 클라이언트에서 다운로드한 자바스크립트 파일을 실행한다.
5. 페이지 인터렉션이 가능해진다.
🌱 CSR
Client Side Rendering의 약자.
말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.
1. 클라이언트가 특정 페이지를 요청한다.
2. 서버에서는 빈 HTML 문서를 클라이언트에 전달한다.3. 클라이언트가 HTML 문서에 포함된 함께 정적 리소스(CSS, 이미지 등), 번들 자바스크립트 파일을 다운로드한다.
4. 클라이언트에서 번들 자바스크립트 파일을 실행한다. 자바스크립트에 의해 페이지가 렌더링되며, 이 때 사용자는 렌더링된 페이지를 볼 수 있다. 아직 API에서 데이터를 받아오지 않았기 때문에 로딩(빈 화면) 혹은 임시 데이터가 표출된다.
5. 페이지 렌더링이 완료된 후, (useEffect 내의) API 요청 코드가 실행된다.
6. API에서 받아온 데이터로 state를 업데이트하고 페이지를 리렌더링한다.
7. 페이지 인터렉션이 가능해진다
