MPA vs SPA 💡
먼저 MPA,
Multi Page Application의 약자로 여러 페이지로 구성된 웹 어플리케이션입니다.
사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.
다음은 SPA,
Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 입니다.
브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다.
Single Page Application(SPA)는 현재 웹개발의 트랜드로 볼 수 있고, 우리가 배운 react와 vue, 앵귤러와 같은 자바스크립트 프레임워크등이 SPA의 방식을 가지고 있습니다.
SSR(Server Side Rendering) 개념, 동작과정, 장단점 ✅
MPA(Multi page application)은 SSR 방식을 채택합니다.
SSR이란 Server Side Rendering의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식입니다.
-
클라이언트가 초기 화면을 로드하기위해 서버에 요청을 보냅니다.
-
서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 css 까지 모두 적용해서 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 응답으로 전달합니다.
-
브라우저에서는 바로 전달 받은 페이지를 띄우구요. 이어, 브라우저가 JS 코드를 다운로드하고 html에 실행시킵니다.
그렇다면 SSR의 장점은?
먼저 SEO 에 제공하는 것입니다
검색 엔진 최적화 라고도 불린 SEO(Search Engine Optimization)는 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정입니다
Server Side Rendering(SSR)을 채택하는 Multi Page Application(MPA)은 화면을 구성하는 각각의 페이지가 있기 때문에 SEO의 유리한 장점이 있습니다
또한 빠른 초기 로딩을 지닙니다.
서버로부터 화면을 렌더링 하기 위한 필수적인 요소를 먼저 가져오기 때문에 이후에 설명할 Client Side Rendering(CSR) 보다 초기로 로딩 속도가 빠릅니다.
SSR의 단점은?
초기 로딩속도가 빠른 만큼 동시에 이것이 치명적인 단점이 되기도 합니다.
TTV(Time To View)와 TTI(Time To Interact) 의 시간 간격이 존재하게 됩니다. 사용자가 버튼을 클릭하거나 이동하려고 해도 아무런 반응이 없을 수 있습니다.
또한, 매번 페이지를 요청할 때마다 새로 고침 되기 때문에 사용자 경험이 다소 떨어집니다.
마지막으로는, 서버측 부하가 증가한다는 단점이 있습니다.
페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가됩니다.
CSR(Client Side Rendering) 개념, 동작과정, 장단점 ✅
싱글 페이지 어플리케이션(SPA)는 렌더링 방식으로 Client Side Rendering(CSR)을 채택합니다.
Client Side Rendering(CSR) 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식입니다.
CSR의 과정은 다음과 같습니다.
-
클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보냅니다.
-
서버는 화면에 표시하는데 필요한 완전한 리소스의 응답합니다.
- 그런데 여기서
CSR방식이SSR과 다른 점은 모든 JS 파일을 다운받아 하기 때문에 초기 로딩 시간의 더 오래 걸린다는 점입니다.
그렇다면 CSR의 장점은?
Client Side Rendering(CSR) 방식은 장점으로 빠른 속도와 서버 부하 감소가 있습니다.
변경된 부분과 관련된 데이터만 가져오므로 Server Side Rendering(SSR) 보다 빠른 속도를 보입니다.
다음으로 사용자 친화적 이라는 장점이 있습니다.
페이지 안에 컨텐츠를 클릭하여 다음 단계로 전환 하는 과정에서 링크가 없기 때문에 깜빡임 없이 부드러운 이동을 경험할 수 있습니다.
CSR의 단점은?
SEO는 불리하다는 단점이 있습니다.
CSR을 채택한 SPA는 자바스크립트를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 웹 크롤러 가 페이지를 색인화 하려고 하면 내용의 빈 페이지 처럼 보이게됩니다.
또한 초기 로딩 속도가 느리다는 단점이 있습니다 CSR은 초기에 모든 JS 파일을 다운받아 와야 하기 때문에 초기 로딩 시간이 오래 걸립니다.
