Single Page ApplicationSPA

MPA (Multi-Page Application):
URL 변경 → 서버에 새 HTML 요청 → 전체 페이지 새로고침
장점: SEO, 초기 로딩, 단순함
단점: 페이지 전환 시 깜빡임

SPA:
URL 변경 → JS가 컴포넌트 교체 (History API)
서버는 JSON 데이터만 반환
장점: 빠른 전환, 앱 같은 경험
단점: 초기 로딩 느림, SEO 기본적으로 어려움

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
            </nav>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/users/:id" element={<UserDetail />} />
            </Routes>
        </BrowserRouter>
    );
}

Next.js, Nuxt.js: 첫 요청 시 서버에서 HTML 렌더링
이후 SPA처럼 동작 (Hydration)