SPA（純前端）                    SSR（伺服器端渲染）
┌─────────────┐                ┌─────────────┐
│  瀏覽器下載 JS  │                │  伺服器先產出 HTML │
│  JS 在瀏覽器跑  │                │  傳給瀏覽器顯示    │
│  畫面都在前端產生│                │  再載入 JS 互動    │
└─────────────┘                └─────────────┘

Next.js 部署                     純前端 SPA 部署
┌──────────────┐               ┌──────────────┐
│ 需要 Node.js 伺服器 │               │ 丟上任何靜態檔案伺服器│
│ 或用 Vercel 託管   │               │ Netlify / S3 / 任何CDN│
│ 有 serverless 冷啟動│               │ 零伺服器成本        │
└──────────────┘               └──────────────┘

// Next.js 的 Server Component —— 如果你不需要 SSR，這些都是多餘的
// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/stats')  // 伺服器端抓資料
  return <Dashboard data={data} />
}
// ↑ 看起來簡單，但背後牽涉到：伺服器環境、快取策略、revalidation...
Code language: JavaScript (javascript)

// 純前端做法 —— 直覺、單純
function DashboardPage() {
  const { data } = useQuery({ queryKey: ['stats'], queryFn: fetchStats })
  return <Dashboard data={data} />
}
// ↑ 所有邏輯都在瀏覽器端，你看得到、除得了錯
Code language: JavaScript (javascript)

// 定義一個路由
const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: DashboardPage,
})
// ↑ 當網址是 /dashboard 時，顯示 DashboardPage
Code language: JavaScript (javascript)

// 抓取使用者資料
const { data, isLoading, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
})
// ↑ queryKey 是快取的鑰匙，queryFn 是實際抓資料的函式
Code language: JavaScript (javascript)

┌─────────────────────────────────────────────┐
│                 使用者的瀏覽器                   │
├─────────────────────────────────────────────┤
│                                             │
│   React（UI 層）                              │
│   「畫面長什麼樣」                               │
│   - Component 組合                           │
│   - 事件處理（onClick 等）                      │
│   - 本地狀態（useState）                       │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│   TanStack Router（路由層）                    │
│   「使用者在哪一頁」                             │
│   - 網址 ↔ 畫面 的對應                         │
│   - 路由參數（/users/123 的 123）              │
│   - 搜尋參數（?page=2&sort=name）             │
│   - 頁面切換的 loader（預先抓資料）              │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│   TanStack Query（資料層）                     │
│   「Server State 管理」                       │
│   - API 資料的快取                             │
│   - 載入 / 成功 / 失敗狀態                      │
│   - 自動重新抓取與背景更新                       │
│   - 樂觀更新（Optimistic Update）              │
│                                             │
├─────────────────────────────────────────────┤
│                                             │
│   API / BaaS（後端服務）                       │
│   「資料存在哪裡」                               │
│   - Supabase / Firebase / 自建 API           │
│   - REST 或 GraphQL                          │
│                                             │
└─────────────────────────────────────────────┘

使用者點擊「訂單列表」
    │
    ▼
TanStack Router：「網址要換成 /orders」
    │
    ▼
TanStack Router 的 loader：「進入頁面前先抓訂單資料」
    │
    ▼
TanStack Query：「快取裡有嗎？沒有就去 API 抓」
    │
    ▼
API / Supabase：「這是訂單資料」
    │
    ▼
TanStack Query：「存到快取，標記為成功」
    │
    ▼
React：「資料來了，畫出訂單列表」

// main.tsx —— 應用程式入口
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'  // 自動產生的路由樹

const queryClient = new QueryClient()     // 建立 Query 的快取管理器
const router = createRouter({ routeTree }) // 建立路由器

function App() {
  return (
    <QueryClientProvider client={queryClient}>  {/* 提供快取管理器給整個應用 */}
      <RouterProvider router={router} />          {/* 提供路由器給整個應用 */}
    </QueryClientProvider>
  )
}
Code language: JavaScript (javascript)

你在這裡
  ↓
#01 架構總覽（本篇）
  │  瞭解「為什麼選這套」和「整體架構」
  ↓
#02 TanStack Router
  │  學會讀路由定義、參數、巢狀路由
  ↓
#03 TanStack Query
  │  學會讀 useQuery / useMutation、快取機制
  ↓
#04 Router + Query 整合
  │  學會讀 loader 模式、預取策略
  ↓
#05 實戰：Supabase CRUD
     把所有東西串起來，做一個完整的應用
Code language: PHP (php)