[思考] 前端該選什麼框架？

[思考] 前端該選什麼框架？ === ###### tags: `frontend` ###### tags: `frontend`, `前端`, `框架選擇`, `React`, `Vue`, `Vanilla JS`, `Next.js`, `Nuxt`, `SEO`, `SSR`, `SSG`, `ISR`, `CSR`, `SPA`, `MPA`, `Islands`, `Hydration`, `Prerender`, `Routing`, `Sitemap`, `Robots.txt`, `Meta tags`, `Open Graph`, `Core Web Vitals`, `LCP`, `CLS`, `INP`, `Web Performance`, `Accessibility`, `a11y`, `TypeScript`, `Bundler`, `Vite`, `Webpack`, `ESM`, `NPM`, `GitHub`, `State of JS`, `Stack Overflow Survey` [TOC] ## 術語 | 關鍵字 | 全名（英文） | 中文對照 / 說明 | | ---------- | ------------------------------- | ------------------------------- | | SEO | Search Engine Optimization | 搜尋引擎最佳化 | | HTML | HyperText Markup Language | 超文字標記語言（網頁的基礎標記） | | JS | JavaScript | JavaScript（網頁腳本語言） | | SPA | Single-Page Application | 單頁應用（頁面不整頁重載，前端路由切換） | | MPA | Multi-Page Application | 多頁應用（每個頁面多為獨立路徑/模板） | | CSR | Client-Side Rendering | 客戶端渲染（主要由瀏覽器用 JS 產生內容） | | SSR | Server-Side Rendering | 伺服器端渲染（伺服器先產生 HTML 給瀏覽器/爬蟲） | | SSG | Static Site Generation | 靜態站點生成（建置時先產生 HTML 檔） | | ISR | Incremental Static Regeneration | 增量式靜態再生（SSG 的頁面可在背景更新/再生） | | Hybrid | Hybrid Rendering | 混合式渲染（同站同時用 SSG/SSR/CSR 等策略） | | Islands | Islands Architecture | 島嶼式架構（大多靜態 HTML，局部互動區塊才用 JS） | | Next.js | Next.js (React Framework) | Next.js（React 生態的全端/SSR/SSG 框架） | | Nuxt 3 | Nuxt (Vue Framework) | Nuxt 3（Vue 3 生態的全端/SSR/SSG 框架） | | Vanilla JS | Vanilla JavaScript | 原生 JavaScript（不依賴大型框架） | --- ## [理解 JavaScript 前端框架](https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries) - 為什麼要用框架？它能解決什麼問題？ - 選用框架時要考慮哪些問題？或甚至，我需要框架嗎？ - 框架擁有什麼功能？一般來說他們怎麼作動，或實作方面有哪些不同？ - 這些框架與「Vanilla JavaScript」（譯註：Vanilla JavaScript 是指原生 JavaScript）或 HTML 有什麼關係？ - 簡易教學 - React 教學 - Ember 教學 - Vue 教學 - Svelte 教學 - Angular 教學 --- ## 🌐 前端框架比較：React、Vue、Angular 與 Vanilla JS（2024–2026 現況分析） > by gpt-5.2 (2026/01/07) ![image](https://hackmd.io/_uploads/H1p4h_o4Wl.png) > **資料來源**：Stack Overflow Developer Survey、State of JS、W3Techs、npm、GitHub 指標與就業市場分析 --- ### 📊 比較面向 | 面向 | 說明 | | ------------ | -------------------------------------- | | 🧑‍💻 開發者使用量 | 反映開發者實際採用率（Stack Overflow、State of JS） | | 🌍 網站實際採用比例 | 根據 W3Techs / BuiltWith，觀察各框架在網站中的佔比 | | 📦 npm 週下載量 | 反映生態規模與開發者活躍度 | | ⭐ GitHub 生態 | 星數、貢獻者數、提交頻率代表社群成熟度 | | 🚀 未來發展性 | 就業市場需求、框架熱度與長期趨勢 | --- ### 🧠 詳細比較（2024–2026 現況） | 指標 | **React** | **Vue** | **Angular** | **Vanilla JS** | | --------------- | ------------------------------------------- | ----------------------------- | --------------------- | ------------------- | | **開發者使用率** | 約 **44–47%**（Stack Overflow 2025） 穩居全球第一 | 約 **17–18%**，穩步上升，已逼近 Angular | 約 **18–20%**，近年略為下滑 | 所有開發者皆使用，無獨立統計 | | **網站採用比例** | 約 **6.2%** 網站使用，市佔 **33%**（JS Framework 類） | 約 **0.7%** 網站使用 | 約 **0.2%** 網站使用 | 約 **20%** 網站僅用原生 JS | | **npm 週下載量** | **3395 萬次/週** | **433 萬次/週** | **145 萬次/週** | 不適用 | | **GitHub 活躍度** | ★239k、1.5k+ 貢獻者、頻繁更新 | ★52k、400+ 貢獻者、穩定更新 | ★99k、1.5k+ 貢獻者、定期版本發佈 | 無（JS 規範由 TC39 管理） | | **市場職缺數（2025）** | 約 **5.2 萬**（最多） | 約 **2 千** | 約 **2.3 萬** | 所有框架皆需 JS 能力 | | **學習曲線** | 中等（需掌握生態） | 最低（入門快） | 最陡（企業規範多） | 中等（理解瀏覽器底層） | | **生態範圍** | 最廣（Next.js、React Native） | 成長中（Nuxt、Vite） | 穩定（RxJS、CLI 全家桶） | 底層通用 | | **典型應用** | SaaS、前後端分離、大型產品 | 中小型網站、行動 WebApp、新創產品 | 企業內部系統、大型專案 | 所有 Web 頁面與基礎 API | | **主要支持者** | Meta（Facebook） | 社群驅動（Evan You） | Google | ECMAScript（TC39） | --- ### 🧩 各框架分析摘要 #### **React** * 🔹 使用最廣、社群最大、資源最豐富 * 🔹 搭配 Next.js、React Native 擴展應用面 * 🔹 適合中大型應用與職場導向開發者 * ⚠️ 缺點：需搭配第三方套件（狀態管理、路由） #### **Vue** * 🔹 入門最友好、語法直觀（支援模板 + Composition API） * 🔹 生態（Nuxt、Vite）成長迅速 * 🔹 在亞洲及新創市場極受歡迎 * ⚠️ 缺點：大型團隊採用率略低於 React/Angular #### **Angular** * 🔹 完整框架（內建 Router、Forms、DI） * 🔹 適合大型企業級專案、強制 TypeScript * 🔹 有 Google 長期支持 * ⚠️ 缺點：學習曲線最陡、靈活性較低 #### **Vanilla JS** * 🔹 所有框架的基礎，必學技能 * 🔹 適合強化 DOM、事件、ES6+ 能力 * 🔹 有助於理解框架原理與除錯 * ⚠️ 缺點：開發大型專案成本高 --- ### 🚀 未來發展趨勢 | 趨勢 | 分析 | | ------------------- | ------------------------------------------- | | **React 生態持續擴張** | 以 Next.js 為代表的 SSR / 全棧應用正成主流；企業與個人專案採用度最高。 | | **Vue 成長快速** | Vue 3 與 Nuxt 3 穩定成熟，特別在東亞市場與中小企業中占優勢。 | | **Angular 穩健但漸趨專精** | Google 維持長期支持，企業內系統仍倚重。 | | **Vanilla JS 地位不變** | ECMAScript 年年更新（ES2025 已制定新語法），仍是所有框架的根基。 | --- ### 🧭 初學者選擇建議 | 目標 | 推薦框架 | 理由 | | -------------------------- | -------------- | --------------- | | 🎯 **想最大化就業機會** | **React** | 全球市場需求最高、支援多平台 | | ⚡ **想快速上手、做 Side Project** | **Vue** | 入門容易、開發效率高 | | 🏢 **想進企業做大型專案** | **Angular** | 結構完整、企業級規範 | | 🧱 **想打好底子再決定框架** | **Vanilla JS** | 深入理解 JS，未來轉換更靈活 | --- ### 🧾 參考資料 * Stack Overflow Developer Survey 2025 * State of JS 2024 * W3Techs / BuiltWith (Web Usage, 2024–2025) * npm Trends (2024–2025 weekly downloads) * GitHub Repo Metrics (Stars, Contributors, Last Commit) * Indeed, LinkedIn Job Data (2025 global demand) --- ✅ **結論** > * 2026 年初仍是 **React > Vue ≈ Angular** 的三強格局。 > * Vue 成長最快，React 穩居主流。 > * Angular 保有企業級市場。 > * Vanilla JS 是所有前端開發者的必修科。 --- ## 討論 ### 針對：個人網站＋商業級多頁應用 MPA、頁面局部動態載入 - ### gpt-5.2 (2025/12/23) **整體「使用排行榜／使用人數」的客觀訊號**大多指向：**React > Vue > Vanilla JS**（Vanilla 不算框架、偏「不用框架」的選擇）。 * **開發者使用量（調查樣本）**：State of JS 2024「Used at Work」中，React 使用數 **8,548**、Vue **3,976**（React 明顯領先）。 ([2024.stateofjs.com][20251223-A-1]) * **網站端實際採用比例（web usage）**：W3Techs（2025/12/23）React 約 **6.2%**（所有網站）、Vue 約 **0.7%**。 ([w3techs.com][20251223-A-2]) * **套件使用量（npm 週下載）**：React 約 **57,170,650/wk**、Vue 約 **7,802,572/wk**（差距大）。 ([npmjs.com][20251223-A-3]) * **生態與活躍度（GitHub 指標）**：React repo 約 **242k stars**。 ([GitHub][20251223-A-4]) * **版本風險提醒**：Vue 2 已在 **2023/12/31 EOL**，新專案應以 Vue 3 為主。 ([GitHub][20251223-A-5]) * **未來發展性（需求面）**：Stack Overflow 2024 顯示 Node.js 使用者「明年最想用」的 web framework 是 **React（45%）**；React 使用者也常轉向 **Next.js（34%）**（顯示 React 生態鏈延伸強）。 ([Stack Overflow][20251223-A-6]) ### 最終建議（客觀＋落地） * **如果你想「一套技術同時 cover 個人網站 + 商業級多頁應用」：選 React（搭 Vite 或 Next.js）** 理由：使用面、套件面、採用面都更大，招聘與第三方方案通常更好找（也比較「不怕選錯」）。 ([2024.stateofjs.com][20251223-A-1]) * **如果個人網站主要是內容展示、互動很少：Vanilla JS（或乾脆少寫 JS）最省**（但一旦互動/狀態/路由變多，成本會回到「自己造框架」）。 * **如果你重視「上手快、框架內建一致性」且團隊偏前端：Vue 3（搭 Nuxt）也很穩**，但請避開 Vue 2。 ([GitHub][20251223-A-5]) --- ### 簡易表格（重點對照） | 面向 | React | Vue 3 | Vanilla JS | |-----|-----|-----|-----| | 使用排行/使用量訊號 | 多數指標第一（Used at Work 8,548；web usage 6.2%；npm 57.2M/wk） ([2024.stateofjs.com][20251223-A-1]) | 多數指標第二（Used at Work 3,976；web usage 0.7%；npm 7.8M/wk） ([2024.stateofjs.com][20251223-A-1]) | 不屬於框架；適合「少互動」頁面 | | 商業級 MPA + 局部動態載入 | ✅ 很成熟（SSR/SSG、生態大） ([Stack Overflow][20251223-A-6]) | ✅ 很成熟（搭 Nuxt 更順） | ⚠️ 規模大後需自建路由/狀態/工程化 | | 長期風險 | 低（生態與採用面大） ([w3techs.com][20251223-A-2]) | 低～中（請確保用 Vue 3；Vue 2 已 EOL） ([GitHub][20251223-A-5]) | 中～高（需求長大時，維護成本易上升） | | 我給你的「一套打天下」推薦 | **✅ React** | 也可行，但次選 | 僅建議用在「真的很簡單」的站 | 如果你願意把「商業級多頁應用」再具體一點（例如：SEO 很重要嗎？需要後台權限/表單很多嗎？），我可以直接給你一個**React/Next vs React/Vite vs Vue/Nuxt**的落地選型。 [20251223-A-1]: https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/ "State of JavaScript 2024: Front-end Frameworks" [20251223-A-2]: https://w3techs.com/technologies/details/js-react "Usage Statistics and Market Share of React for Websites, December 2025" [20251223-A-3]: https://www.npmjs.com/package/react?utm_source=chatgpt.com "React" [20251223-A-4]: https://github.com/facebook/react "GitHub - facebook/react: The library for web and native user interfaces." [20251223-A-5]: https://github.com/vuejs/vue "GitHub - vuejs/vue: This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core" [20251223-A-6]: https://survey.stackoverflow.co/2024/technology "Technology | 2024 Stack Overflow Developer Survey" --- ### Next.js 不是 React 的一部分嗎？ - ### gpt-5.2 (2025/12/23) 不是「React 的一部分」，但**Next.js 是建立在 React 之上的「上層框架」**。把它想成分工： * **React**：UI 元件庫（你負責把畫面用 component 組起來）。它本身不強制你怎麼做路由、SSR、打包、後端 API、部署格式等。 * **Next.js**：用 React 當底層 UI（你還是寫 React component），但它額外提供一整套「做網站/應用需要的骨架與能力」，例如： * **檔案式路由**（pages/ 或 app/） * **SSR / SSG / ISR**（伺服器端渲染、靜態生成、增量更新） * **Server Components / Server Actions**（在 Next 的架構中把部分邏輯放到 server） * **API Routes / Middleware**（可把一些後端能力放在同個專案） * **打包與最佳化**（預設整合編譯、分包、圖片最佳化等）所以我說「React 使用者也常轉向 Next.js」的意思是： > 很多人在用 React 做到一定規模後，會選擇 Next.js 這種 React-based framework，來補齊「路由、SSR、部署、工程化」這些 React 本身不直接提供的東西。用一句話區分： * **React = 你用來寫 UI 的引擎** * **Next.js = 用 React 當引擎的一台完整車（含底盤、導航、保養配套）** 如果你的目標是 **多頁應用（MPA）＋部分頁面動態載入**，Next.js 常見的兩種用法： * **內容/SEO頁面** 用 SSR/SSG（更快、SEO 更好） * **互動區塊** 用 React client component 動態載入你也可以不用 Next.js：用 **React + Vite** 也能做（偏 SPA 或前後端分離、多頁要自己規劃），只是「網站級功能」要自己再選工具組裝。 --- ### SEO 很重要 - ### gpt-5.2 (2025/12/23) SEO 很重要的話，重點就不是「React vs Vue」本身，而是你要用**能輸出可被爬蟲直接讀到的 HTML** 的方案（**SSG / SSR**），而不是純前端 SPA 只靠 client render。 ### 最穩的做法（同時適合個人站＋商業級多頁） * **React → 選 Next.js** * 內容頁（品牌頁、文章、落地頁）用 **SSG** 或 **ISR**（預先產 HTML、快、SEO 友善） * 需要即時資料的頁面用 **SSR** * 生態與企業採用度很高；Stack Overflow 2024 也顯示 React/Next.js 在 web framework 心願採用上很強勢。 * **Vue → 選 Nuxt 3** * 同樣支援 **SSG / SSR / Hybrid** * Vue 2 已 EOL，新案務必 Vue 3 / Nuxt 3。 ### 那 Vanilla JS 呢？ * **Vanilla JS 做 SEO 沒問題，但前提是你用「先出 HTML」的架構**： * 例如後端模板（Django/Rails/Laravel）或靜態站點生成（SSG），再用少量原生 JS 做局部互動（「島嶼式互動」） * 如果你商業站後續互動會變多（表單流程、會員、動態區塊很多），純 Vanilla 後期維護成本通常會上升（你會開始自己補路由/狀態/組件化那套）。 ### 直接給結論 * **你說 SEO 很重要**，而你又要「個人網站 + 商業級多頁」： **首選：Next.js（React）** **次選：Nuxt 3（Vue）** * 除非你確定互動非常少、想極簡：才考慮 Vanilla + 後端模板/SSG。如果你願意我再更精準一點：你的「SEO 很重要」是以 **文章/內容頁** 為主，還是 **產品落地頁/多語系** 為主？（不同會影響 SSG/SSR/ISR 的比例與路線。） {%hackmd vaaMgNRPS4KGJDSFG0ZE0w %}