MPA / SPA

 

🐢 MPA (Multiple Page Application)

• 두 개 이상의 페이지로 구성된 애플리케이션
• 사용자의 클릭과 같이 인터렉션이 발생할 때마다 해당 링크로 이동하여 앱이 다시 새로고침되는 방식으로 작동한다.
  • 🦦 인터렉션이 뭐죠?
    사용자의 특정 동작을 입력받아 시스템과 상호작용하는 것
• 렌더링 방식으로 SSR(Server-Side-Rendering) 방식을 채택한다.
  
  • 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식
  • 페이지를 이동하거나 새로고침하면 서버에서 전체 페이지를 다시 렌더링한다.
  • 🦦 렌더링이 뭐죠?
    웹 페이지를 사용자에게 보여주기 위해 서버로부터 받은 HTML, CSS, JS 파일들을 브라우저가 처리하여 화면에 출력하는 과정

 

🐢 SPA (Single Page Application)

• 한 개의 페이지로 구성된 애플리케이션
• 렌더링 방식으로 CSR(Client-Side-Rendering)을 채택한다.
  • 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식
  • 단 한 번만 리소스(html, css, js)를 로딩하고, 이후에는 데이터를 받아올 때만 서버와 통신한다.
  • 페이지를 변경하지 않고 js를 이용하여 콘텐츠만 변경하여 웹페이지를 보여준다.
    
    • 첫 요청 시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정해서 보여준다.

 

SPA에서는 CSR만 사용해야 할까?
No!

 

🐢 SPA에서는 CSR만 사용해야 하는 것은 아니다.

• 대부분의 SPA는 CSR을 기본으로 한다.
  대표적으로 React, Vue.js, Angular 등의 프레임워크를 사용하는 경우가 해당된다.
  초기 HTML이 최소한의 구조만 가지고 서버에서 전달되고, JS가 브라우저에서 실행되어 나머지 콘텐츠를 동적으로 로드하고 렌더링하는 방식이다.
• 하지만 SPA에서도 SSR을 사용할 수 있다.
  대표적으로 Next.js는 React 기반의 SPA에서 SSR을 지원한다.
  SSR을 사용하면 초기 페이지가 서버에서 렌더링되어 완전한 HTML로 제공된 후, 브라우저에서 JS가 실행되어 SPA로 전환된다.
• Hybrid Rendering
  SPA에서 SSR과 CSR을 혼합하여 사용하는 방식도 있다.
  초기 페이지 로드는 서버에서 렌더링 하고, 이후의 페이지 전환은 클라이언트에서 처리할 수 있다.
  이 방법을 통해 초기 로딩 성능과 SEO를 개선하면서 SPA의 장점을 유지할 수 있다.
  
  • 🦦 여기서 말하는 '클라이언트에서 처리한다'의 의미가 무엇일까?
    웹 애플리케이션의 초기 로드 시 서버에서 HTML을 생성하고 전송하지만, 사용자가 다른 페이지로 이동할 때는 추가적인 서버 요청 없이 브라우저에서 페이지 전환을 처리한다는 것을 의미한다.

 

MPA에서는 SSR만 사용해야 할까?
No!

 

🐢 MPA에서도 CSR을 사용할 수 있다.

• MPA는 각 페이지 요청마다 서버에서 새로운 HTML 페이지를 로드하는 방식이다.
• MPA에서도 각 페이지에서 CSR을 사용할 수 있다.
  각 페이지가 처음 로드될 때 서버에서 렌더링된 HTML을 받지만, 페이지 내에서 추가적인 상호작용이나 일부 콘텐츠는 js를 사용하여 클라이언트 측에서 렌더링 될 수 있다.
• Hybrid Rendering
  MPA에서도 SSR과 CSR을 혼합할 수 있다.
  각 페이지의 주요 콘텐츠는 서버에서 렌더링하고, 페이지 내 동적 요소나 상호작용은 클라이언트 측에서 처리할 수 있다.

 

SPA와 MPA는 늘 명확하게 구분되는 것일까?
No!

 

🐢 많은 애플리케이션이 SPA와 MPA의 요소를 혼합하여 사용한다.

예를 들어, MPA 구조를 기본으로 하지만 각 페이지 내에서 SPA와 같은 동적 콘텐츠 업데이트를 사용하거나,

SPA이지만 일부 초기 페이지 로드를 SSR로 처리하는 경우도 있다.

 

🐢 CSR을 채택한다고 해서 이것만 사용하는 것이 아닌, 애플리케이션을 구성하는 부분에 따라 단순 정보 제공과 같은 부분은 SSR로, 동적인 변화가 필요한 부분은 CSR로 개발하는 것이 좋다. 다시말해, 컨텐츠 중심으로 개발을 해야 한다.

 

🐢 AJAX의 등장

• MPA와 SPA를 조사하던 중 개인적으로 흥미로웠던 내용이기도 하고, 알아둔다면 좋을 것 같아서 추가적으로 정리해보았습니다! 😀

이미지 출처 : https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA

• 초창기 웹은 텍스트 중심의 단순 문서였다.
  이러한 초창기 웹은 다중 페이지로 이루어져 있으며 변경 사항이 있을 때마다 서버로 페이지를 요청하는 MPA 방식으로 구현이 되어 있었다. 그렇기에, 페이지를 이동할 때마다 서버로부터 새로운 html 파일을 내려받기 때문에 새로고침이 발생하며 이 과정에서 유저는 깜빡이는 화면을 보는 불편함이 있었으며, 이후 웹이 발전함에 따라 사진, 영상 및 유저 인터렉션이 많아지며 MPA로는 성능 이슈가 생기게 되었다. 이러한 문제점을 해결하기 위한 AJAX가 등장하게 되었으며, 기존 MPA에서 페이지 전환 시마다 전체를 새로 로드하지 않고 필요한 데이터만 동적으로 불러오는 방식인 SPA로의 발전을 가능하게 하였다.

• 🦦 AJAX란?
  • JavaScript의 라이브러리 중 하나로, Ashynchronous Javascript And Xml(비동기식 js와 xml)의 약자이다.
  • AJAX는 웹 애플리케이션에서 페이지 전체를 새로 고치지 않고, JavaScript를 사용해 필요한 데이터만 비동기적으로 서버와 주고받을 수 있게 하는 기술이다. 이를 통해 더 빠르고 매끄러운 사용자 경험을 제공할 수 있게 되었다.
    • 🦦 비동기적이라는 게 뭐죠?
      먼저 동기적 처리에 대해 알아보겠다.
      요청 ➡️ 응답 대기 ➡️ 응답 받음 ➡️ 다음 작업 진행
      반면 비동기적 처리는 다음과 같이 진행된다.
      요청 ➡️ 다른 작업 수행 ➡️ 응답 받음 ➡️ 다음 작업 진행
      즉, 서버에 데이터를 요청한 후 응답을 기다리는 동안 다른 작업을 계속 진행할 수 있기 때문에 페이지가 멈추거나 반응이 느려지는 문제점을 해결할 수 있다.

 

🐢조사하다보니 AJAX에 대한 내용이 아주 방대하더라구요..😓 이번 블로그는 MPA와 SPA에 대한 내용이기 때문에
이후에 AJAX에 대해 더 자세히 알아보는 시간을 가지기로 하고, 오늘 블로그는 여기서 마치기로 하겠습니다! 👋