SPA와 MPA의 차이점
SPA
하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다.
MPA
탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다.
CSR과 SSR의 개념
SPA에서는 CSR로 렌더링하고, MPA에서는 SSR로 렌더링 한다.
CSR
SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링 한다.
1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다. 2. 이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다. 3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다. 4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다.
CSR의 장단점
장점 : 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에서 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다는 특징이 있다.
단점 : 순서 3번에서 처럼 CSR은 브라우저가 JavaScript 파일을 다운로드하고, 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다는 것이 단점이다.
SSR
새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아오기 때문에 SSR로 렌더링 한다.
1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다. 2. 이에 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JavaScript코드를 브라우저에 응답으로 전달한다. 3. 브라우저에서는 JavaScript코드를 다운로드하고 HTML에 JavaScript로직을 연결한다.
SSR의 장단점
장점 : SSR은 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다. 자바스크립트 코드를 다운로드 받고, 실행하기 전에 사용자가 이미 HTML이 렌더링 된 화면을 볼 수 있다. 이렇듯 JavaScript 다운로드를 기다려야 했던 CSR 보다 초기 구동 속도가 빠르다.
단점 : 사용자가 버튼을 클릭하거나 이동하려고 할 때 아무 반응이 없을 수 있다. interaction이 가능한 페이지처럼 보이지만 실제로는 내용과 스타일이 입혀진 껍데기에 불과하고 실제로는 클라이언트 측 JavaScript가 실행되고 이벤트 핸들러가 첨부된 JavaScript 로직이 모두 연결될 때까지 사용자의 입력에 응답할 수 없기 때문이다. 시간 간격이 존재한다.