隨著Web開發技術的不斷進步，前端開發模式也在不斷演變。單頁應用（Single Page Application，SPA）和多頁應用（Multi-Page Application，MPA）是目前最常見的兩種前端架構模式。兩者在開發體驗、使用者體驗以及技術實現上各有特點和適用場景。本文將從多個角度深入探討SPA和MPA的方方面面，幫助你全面瞭解這兩種架構模式的優缺點、實現細節及應用場景。
一、什麼是單頁應用（SPA）？
單頁應用（SPA）是一種Web應用架構模式，其核心理念是在一個頁面中載入所有必要的HTML、CSS和JavaScript資源，透過JavaScript動態更新頁面內容，而不需要每次使用者操作都重新載入整個頁面。
特點：
單一頁面載入：初次載入時獲取所有必要的資源，後續透過AJAX請求獲取資料。
動態內容更新：透過JavaScript操作DOM，實現頁面的區域性更新，無需重新整理整個頁面。
前端路由：使用前端路由管理頁面狀態和URL，保持與使用者互動的連續性。
示例：
// 使用React構建簡單的SPA
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { page: 'home' };
}
navigate(page) {
this.setState({ page });
}
render() {
const { page } = this.state;
return (
<div>
<nav>
<button onClick={() => this.navigate('home')}>Home</button>
<button onClick={() => this.navigate('about')}>About</button>
</nav>
{page === 'home' && <h1>Home Page</h1>}
{page === 'about' && <h1>About Page</h1>}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
二、什麼是多頁應用（MPA）？
多頁應用（MPA）是一種傳統的Web應用架構模式，每個頁面對應一個獨立的HTML檔案。使用者在不同頁面之間導航時，瀏覽器會載入新的HTML頁面，從而實現頁面切換。
特點：
每個頁面獨立載入：每個頁面有獨立的HTML檔案，頁面間導航時瀏覽器重新載入整個頁面。
伺服器端渲染：頁面由伺服器端渲染並返回，通常伴隨完整的HTTP請求-響應週期。
後端路由：由伺服器端的路由來管理頁面導航和URL。
示例：
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Home Page</title> </head> <body> <nav> <a href="/about.html">About</a> </nav> <h1>Home Page</h1> </body> </html> <!-- about.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>About Page</title> </head> <body> <nav> <a href="/index.html">Home</a> </nav> <h1>About Page</h1> </body> </html>
三、SPA與MPA的詳細對比
1. 效能表現
初次載入：MPA的初次載入通常比SPA快，因為每個頁面只需要載入當前頁面所需的資源。而SPA初次載入時需要獲取所有資源，載入時間較長。
後續互動：SPA在初次載入完成後，後續頁面切換透過AJAX請求實現，無需重新載入整個頁面，因此互動速度更快。而MPA每次頁面切換都需要重新載入整個頁面，互動體驗相對較慢。
2. 開發體驗
程式碼組織：SPA通常將所有程式碼打包在一起，使用模組化和元件化開發，提高程式碼複用性和維護性。而MPA每個頁面是獨立的HTML檔案，程式碼相對分散，維護起來較複雜。
狀態管理：SPA需要在前端管理應用狀態，常用的狀態管理庫如Redux、Vuex等。而MPA的狀態管理主要依賴於伺服器端，頁面間狀態傳遞較為複雜。
3. SEO（搜索引擎最佳化）
SPA：由於內容是透過JavaScript動態載入，搜索引擎爬蟲可能無法索引全部內容，SEO較為困難。不過，可以透過服務端渲染（SSR）或預渲染（Prerendering）來改善。
MPA：每個頁面都有獨立的URL和靜態內容，搜索引擎更容易索引，SEO友好度較高。
4. 使用者體驗
流暢度：SPA在使用者互動時無需重新載入頁面，體驗更流暢，特別適合需要頻繁操作的應用。
導航和歷史記錄：SPA需要自己實現導航和歷史記錄管理，可能會遇到一些複雜問題。而MPA的導航和歷史記錄由瀏覽器原生支援，使用方便。
四、SPA和MPA的實現細節
1. SPA的實現細節
路由管理：
SPA通常使用前端路由庫（如React Router、Vue Router）來管理頁面導航和URL。
// 使用React Router實現簡單的SPA路由
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
export default App;
狀態管理：
SPA需要在前端管理應用狀態，常用的狀態管理庫如Redux（用於React）和Vuex（用於Vue）。
// 使用Redux管理React應用的狀態
import { createStore } from 'redux';
const initialState = { count: 0 };
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
}
const store = createStore(reducer);
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }
2. MPA的實現細節
頁面導航：
MPA的頁面導航依賴於伺服器端路由和HTML連結，透過傳統的HTTP請求-響應機制實現。
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Home Page</title> </head> <body> <nav> <a href="/about.html">About</a> </nav> <h1>Home Page</h1> </body> </html>
伺服器端渲染：
MPA通常使用伺服器端渲染，生成完整的HTML頁面並返回給瀏覽器。
// 使用Node.js和Express實現簡單的伺服器端渲染
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send(`
<html>
<head><title>Home Page</title></head>
<body>
<nav><a href="/about">About</a></nav>
<h1>Home Page</h1>
</body>
</html>
`);
});
app.get('/about', (req, res) => {
res.send(`
<html>
<head><title>About Page</title></head>
<body>
<nav><a href="/">Home</a></nav>
<h1>About Page</h1>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
五、框架支援
1. SPA框架
常見的SPA框架也是前端開發最常用到的框架：React、Vue、Angular等等，這裏就不多敘述了。
2. MPA框架
傳統伺服器端框架：
傳統的伺服器端框架如Express（Node.js）、Django（Python）、Rails（Ruby）等，適合構建MPA。它們通常提供了完善的路由管理和模板渲染功能。
Express示例：
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send(`
<html>
<head><title>Home Page</title></head>
<body>
<nav><a href="/about">About</a></nav>
<h1>Home Page</h1>
</body>
</html>
`);
});
app.get('/about', (req, res) => {
res.send(`
<html>
<head><title>About Page</title></head>
<body>
<nav><a href="/">Home</a></nav>
<h1>About Page</h1>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
Django示例：
# views.py
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
def about(request):
return render(request, 'about.html')
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
path('about/', views.about, name='about')
]
# home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<nav>
<a href="{% url 'about' %}">About</a>
</nav>
<h1>Home Page</h1>
</body>
</html>
# about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Page</title>
</head>
<body>
<nav>
<a href="{% url 'home' %}">Home</a>
</nav>
<h1>About Page</h1>
</body>
</html>
五、SPA與MPA的適用場景
適合SPA的場景：
互動頻繁的應用：如單頁應用的管理系統、線上編輯器、實時聊天應用等。
需要流暢使用者體驗的應用：如電商網站、社交平臺等，使用者無需頻繁重新整理頁面。
移動應用：SPA的前端邏輯和狀態管理可以更好地適配移動端的互動需求。
適合MPA的場景：
內容豐富的網站：如部落格、新聞網站等，SEO需求較高。
傳統企業應用：如企業官網、資訊展示頁面等，頁面間導航需求簡單。
安全性要求高的應用：如銀行系統、醫療系統等，MPA的伺服器端渲染和獨立頁面載入可以提供更好的安全保障。
六、總結
單頁應用（SPA）和多頁應用（MPA）各有優缺點，選擇哪種架構模式應根據具體專案需求和團隊技術棧來決定。SPA提供了更流暢的使用者體驗和更高的開發效率，適用於互動頻繁和需要動態更新的應用。MPA則在SEO友好性和伺服器端渲染方面具有優勢，適用於內容豐富和安全性要求高的應用。
希望透過本文的詳細解析，能幫助你更好地理解SPA和MPA的區別和應用場景，為你的專案選擇最合適的前端架構。
