React 框架選擇指南：CRA、Vite、Next.js 還是 Remix？

前言

React 本身只是一個 UI 函式庫，要建立完整的應用還需要搭配路由、建置工具、SSR 等功能。市面上的選擇越來越多，這篇文章幫你整理清楚每個方案的適用場景。

各方案概覽

Vite + React（純 CSR）

最單純的選擇。適合不需要 SSR 和 SEO 的應用。

npm create vite@latest my-app -- --template react-ts

優點：

• 建置速度極快（開發環境秒啟動）
• 設定簡單，學習成本低
• 完全掌控，沒有黑魔法

缺點：

• 沒有 SSR，SEO 能力有限
• 路由需要自己設定（通常用 React Router）
• 沒有內建的資料載入方案

適合：

• 管理後台、Dashboard
• 內部系統
• SPA 應用（搭配 Laravel API）

Next.js

React 生態系中最主流的全端框架。

npx create-next-app@latest my-app --typescript --tailwind --app

優點：

• SSR/SSG/ISR 完整支援
• 檔案式路由
• API Routes 可以寫後端邏輯
• Image 優化、字型優化等內建功能
• Vercel 部署超方便

缺點：

• 框架較重，學習曲線陡
• App Router 的概念需要時間消化
• 部署受限（有些功能需要 Node.js 伺服器）
• 過度封裝，有時候不知道框架背後做了什麼

適合：

• 需要 SEO 的公開網站
• 電商網站
• 部落格和內容網站
• 全端應用

Remix

強調 Web 基礎的全端框架。

npx create-remix@latest my-app

優點：

• 基於 Web 標準（Form、Request、Response）
• 巢狀路由和平行資料載入
• 錯誤處理設計優秀
• 漸進式增強

缺點：

• 生態系不如 Next.js 完整
• 社群較小，資源較少
• 部分概念跟傳統 React 思維不同

適合：

• 重視 Web 基礎的專案
• 需要複雜路由結構的應用

Astro（搭配 React）

靜態優先，需要互動的部分再用 React。

npm create astro@latest my-app
npx astro add react

優點：

• 預設零 JavaScript，效能極佳
• Islands Architecture：只在需要的地方載入 JS
• 可以混用 React、Vue、Svelte
• 內建內容集合功能

缺點：

• 不適合高度互動的應用
• 複雜的客戶端狀態管理較麻煩

適合：

• 部落格和文件網站
• 行銷頁面和 Landing Page
• 以內容為主的網站

接案專案的選擇策略

搭配 Laravel API

如果後端已經用 Laravel，前端的選擇通常是：

1. Inertia.js + React：最緊密的整合方式，不需要寫 API
2. Vite + React：SPA 模式，透過 API 跟 Laravel 溝通
3. Next.js：如果需要 SSR 和 SEO，獨立部署

我個人最常用 Inertia.js，因為開發速度最快。如果客戶需要 SEO 優先，才會考慮 Next.js。

純前端專案

需求	推薦方案
管理後台	Vite + React
企業官網	Astro 或 Next.js
電商	Next.js
部落格	Astro
Web App	Vite + React 或 Next.js

效能比較

以一個中型專案為例（首頁載入）：

指標	Vite (CSR)	Next.js (SSR)	Astro
FCP	1.5s	0.8s	0.4s
LCP	2.5s	1.2s	0.6s
JS 大小	200KB+	100KB+	10KB
TTI	3.0s	1.5s	0.5s

Astro 在靜態內容的效能上遙遙領先，但它不適合需要大量互動的應用。

常見問題

Next.js App Router vs Pages Router

2025 年，App Router 已經是 Next.js 的預設和推薦方式。除非有特殊原因，新專案直接用 App Router。

要不要用 Server Components？

如果你的專案用 Next.js，Server Components 是預設行為。只有需要互動（useState、onClick 等）的元件才需要加 'use client'。

部署成本

• Vite (SPA)：靜態檔案，放 CDN 就好，幾乎零成本
• Next.js：需要 Node.js 伺服器。Vercel 有免費額度，自建需要 VPS
• Astro：靜態檔案 + 少量 SSR。Cloudflare Pages 免費部署

我的結論

沒有最好的框架，只有最適合的選擇。我在接案中最常用的組合：

1. Laravel + Inertia.js + React：大部分的全端專案
2. Astro：內容網站、部落格、作品集
3. Next.js：需要 SSR 的獨立前端專案
4. Vite + React：管理後台和內部系統

根據專案需求、團隊熟悉度和時程壓力，做出務實的選擇比追求技術潮流更重要。