[CS] SPA와 MPA에 대해

SPA(Single Page Application)

 

설명

 

• 단일 페이지 애플리케이션
• 한 번의 페이지 로드 후에는 서버로부터 추가적인 페이지를 받지 않고 동적으로 콘텐츠를 업데이트하는 방식
• 초기에 필요한 리소스를 한 번만 로드하고, 이후에는 Ajax나 WebSocket 등을 통해 서버와 비동기적으로 데이터를 주고받아 페이지를 업데이트
• 사용자 경험을 향상 시키고, 애플리케이션의 반응 속도를 빠르게 만들어 준다.
• 주로 React, Angular, Vue.js와 같은 프레임워크나 라이브러리를 사용하여 개발
• 예시

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('안녕하세요!');

  const updateMessage = () => {
    setMessage('새로운 메시지입니다!');
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={updateMessage}>메시지 업데이트</button>
    </div>
  );
}

export default App;

 

 

---

 

MPA(Multi Page Application)

 

설명

 

• 다중 페이지 애플리케이션
• 각각의 페이지가 서버로부터 독립적으로 로드되고 각각의 페이지마다 서버로 부터 HTML을 받아와 렌더링하는 방식
• 사용자가 페이지를 요청할 때마다 서버에 새로운 요청을 보내고, 서버는 해당 페이지에 대한
  HTML을 응답으로 보내준다.
• 전통적인 웹 애플리케이션 개발 방식이며, 주로 PHP, Java, Ruby 등의 서버 사이드 언어와 HTML, CSS, JS를 사용하여 개발
• 예시

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>홈 페이지</h1>;
}

function About() {
  return <h1>소개 페이지</h1>;
}

function Contact() {
  return <h1>연락처 페이지</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">홈</Link></li>
          <li><Link to="/about">소개</Link></li>
          <li><Link to="/contact">연락처</Link></li>
        </ul>
      </nav>

      <div id="content">
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

export default App;

 

 

---

SPA와 MPA의 차이점

 

SPA(Single Page Application)	MPA(Multi Page Application)
초기에 필요한 리소스를 한 번만 로드	각각의 페이지가 서버로부터 독립적으로 로드
Ajax나 WebSocket 등을 통해 서버와 비동기적으로 데이터를 주고받아 페이지를 업데이트	사용자가 페이지를 요청할 때마다 서버에 새로운 요청을 보내고, 서버는 해당 페이지에 대한 HTML을 응답
SPA는 페이지 간의 전환 시에 화면이 깜빡이지 않고 부드럽게 전환되어 사용자 경험을 향상	페이지 간 전환 시에는 서버로부터 새로운 페이지를 로드해야 하므로 화면이 깜빡이거나 잠시 멈출 수 있음
SPA는 초기 로딩 시에 필요한 리소스를 한 번에 로드하기 때문에 초기 로딩 속도가 느릴 수 있음	각각의 페이지를 독립적으로 로드하기 때문에 초기 로딩 속도가 빠르다.
한 번에 로드하고, 동적으로 콘텐츠를 업데이트를 하기 때문에 검색 엔진이 콘텐츠를 수집하기 어려울 수 있다.	각각의 페이지가 서버로부터 독립적으로 로드되기 때문에 검색 엔진이 콘텐츠를 수집하기 용이

 

---

혼합 방식

 

• Hybrid Application이라고도 한다.
• 메인 페이지나 인증이 필요한 페이지와 같이 동적인 기능이 필요한 부분은 SPA로 개발
• 블로그 게시물이나 제품 목록과 같이 정적인 콘텐츠가 많은 부분은 MPA로 개발
• SPA로 인해 얻을 수 있는 부드러운 사용자 경험과 MPA로 인해 얻을 수 있는 초기 로딩 속도와 SEO 등을 조합
• 혼합해서 사용하는 경우 개발 방식과 아키텍처를 조정해야 하기 때문에 복잡 가능

 

---