在前端技術日新月異的今天，React 社群已經不再將 create-react-app 作為建立新計畫的首選工具，而是推薦使用社群中流行的由 React 驅動的框架來建立新計畫。本文就來探討在 2024 年建立 React 計畫的方式及其優缺點！
Create React App 有什麽問題？
Create React App（CRA）於 2016 年 7 月首次釋出，是一個方便快捷的 React 計畫搭建工具。盡管在 React 社群中廣受歡迎，但也有一些限制和缺點需要考慮。
配置選項有限： Create React App 的配置選項有限。由於該工具對構建過程進行了高度抽象，客製 Webpack 和 Babel 配置相對困難。在某些情況下，開發人員可能需要進行一些自訂操作，這就意味著他們可能需要從 CRA 分離出來，自行管理配置和依賴關系。然而，這種分離可能會導致未來的更新和維護變得更為復雜。
復雜的依賴關系： Create React App 附帶了一組預定義的依賴項，包括 Webpack、Babel 和 ESLint。雖然這消除了手動配置這些工具的麻煩，但也意味著開發人員需要自行管理和更新這些依賴項。
構建資源的大小： Create React App 的預設配置優先考慮的是開發速度，而不是生成的包大小或套用的初始載入時間。因此，生成的包可能比實際需要的大，從而影響套用的初始載入時間。
Create React App 的最新版本是 2022 年 4 月 12 日的 v5.0.1，但在 2023 年 3 月 16 日，React 團隊在文件網站上正式宣布停止將不再積極維護 Create React App。
Vite
Vite 無疑是 create-react-app（CRA）的絕佳替代品。與 CRA（使用 Webpack）相比，Vite 因其底層使用 esbuild 而具有顯著的效能優勢。
vite.config.js
檔，以及特定功能的檔（例如
tsconfig
），只需進行少量配置即可啟用 TypeScript、SVG 和 SSR 等選擇性功能。
最後，但同樣重要的是，Vite 使得初學者能夠更專註於學習 React 的基礎，而不會被框架的復雜性所幹擾。相比之下，在某些框架中學習 React 時，React 可能會被置於次要地位，學習者需要遵循框架的特定規則和觀點（例如基於檔的路由）。這種框架導向的方法可能會使 React 的核心概念變得模糊，而 Vite 提供的無框架環境則讓學習者能夠更深入地理解 React 的本質。
React + Vite 的優勢：
高效替代 ：Vite能夠直接替代create-react-app（CRA），為開發者提供更快速和流暢的開發生態系。
靈活性 ：Vite不僅支持單頁面套用/客戶端渲染，而且允許開發者選擇是否啟用伺服器端渲染（SSR）。
框架獨立 ：Vite不繫結任何特定的框架或公司，使開發者能夠自由選擇最適合計畫需求的工具和庫。
輕量級 ：Vite的輕量級特性使其成為高效開發的理想選擇，不會引入不必要的復雜性。
專註於React ：Vite的設計理念是避免在功能層面對React產生幹擾，從而讓開發者能夠專註於React本身，而不是框架的限制。
平緩的學習曲線 ：由於Vite簡化了開發流程，它可以幫助初學者更輕松地了解React的基礎知識，而無需陷入復雜的框架體系。
廣泛套用 ：Vite 不僅適用於 React 計畫，還被廣泛套用於其他許多前端框架。
React + Vite 的缺點：
優先考慮SPA ：Vite 主要針對單頁面套用/客戶端渲染進行最佳化，這可能不適合所有型別的計畫需求。
缺乏框架支持 ：與某些框架結合使用時，Vite可能不會提供與特定框架完全整合的所有優勢和特性。
對整合框架特性的限制 ：由於 Vite 的設計理念，它可能無法充分利用某些與整合框架相關的特性，如 React Server Components (RSC)。
Next.js
作為成熟度很高的 React 框架，Next.js 無疑是 React 開發人員的首選。當開發者希望在一個具有明確觀點的框架環境中使用 React 時，Next.js憑借其內建的眾多功能，能夠提供卓越的支持。然而，如果你對Next.js並不滿意，不妨考慮一下Remix。Remix同樣為React開發提供了強大的支持，並且在某些方面可能更適合你的計畫需求。
Next.js 還允許在單個套用中混合使用不同的渲染技術。例如，可以選擇使用 SSG 為行銷頁面提供靜態內容，同時在使用者完成註冊和登入後，使用 SSR 技術渲染實際的套用界面。
然而，這種強大的功能也帶來了一定的挑戰和成本。不同的渲染技術可能會增加工程的復雜性和負擔。此外，隨著框架不斷發展，開發人員就需要不斷更新自己的技能和理解，以跟上技術發展的步伐。
Next.js 的優勢：
內建庫與明確觀點 ：Next.js 提供了豐富的內建庫和工具，為開發者提供了明確和一致的開發觀點，降低了開發難度。
多樣的渲染技術 ：Next.js 支持伺服器端渲染（SSR）和多種其他渲染技術，這有助於提高套用的效能和SEO效果。
效能最佳化 ：如果使用得當，Next.js 可以顯著提高套用效能。
SEO優勢 ：由於其強大的SSR支持，Next.js 在SEO方面表現優秀，確保了良好的搜尋引擎可見性。
強大的後盾 ：Vercel 作為一家實力雄厚的企業，為Next.js的發展提供了堅實的後盾，確保了計畫的持續更新和支持。
前沿技術投入 ：Next.js 始終關註並采用前端領域的最新技術，確保始終處於技術前沿。
Next.js 的缺點：
對前沿技術的依賴 ：Next.js 過於關註前沿技術，這可能導致一些開發者在跟進和學習上感到困難。
相對於純React或Vite的開銷 ：與僅使用React或Vite相比，使用Next.js可能會增加開發、部署和維護的開銷。
學習難度大 ：Next.js 功能強大但學習曲線較陡峭，需要開發者投入更多的時間和精力去學習和掌握。
框架限制 ：Next.js 作為框架，對開發方式有一定的限制，可能影響開發者的創新和靈活性。
Remix
Remix 是一個全棧框架，重新定義了 UI，並極大地提升了網路效能、速度和使用者體驗。透過整合諸如 esbuild、React Router、伺服器端渲染、生產伺服器和後端最佳化等前沿工具和技術，Remix 滿足了各種 Web 開發需求。
Remix 的優勢體現在以下幾個方面：
高效的程式碼編譯 ：Remix采用esbuild這一快速JavaScript/CSS打包器和壓縮器進行編譯，確保了閃電般的載入時間和最佳的程式碼效率。
卓越的效能最佳化 ：在伺服器端采用漸進增強技術，只向瀏覽器發送必要的JavaScript、JSON和CSS內容，顯著提升了效能並減少了頻寬占用。
智慧渲染與數據管理 ：利用動態伺服器端渲染技術，為使用者提供無縫和互動式的體驗。其智慧設計能夠自動重新獲取變異數據，Remix 能夠無縫管理整個工作流程。
端到端的解決方案 ：Remix提供了一套完整的解決方案，包括React Router、伺服器端渲染、生產伺服器和後端最佳化等，為開發者提供了極大的便利。
React 團隊認為 Remix 是一個具有巢狀路由功能的領先全棧 React 框架，能夠輕松打造出具有出色使用者體驗和卓越效能的動態網站。
Astro
Astro 允許開發人員建立 以內容為重點 的網站。由於其島嶼架構和選擇性水合作用，它預設情況下使每個網站都具有快速效能。因此，對於需要SEO的網站來說，使用 Astro 是非常有益的。
Astro 是一個與框架無關的解決方案。這意味著既可以使用Astro內建的元件語法，也可以選擇與熟悉的框架（如React）進行整合。盡管如此，Astro 僅用於伺服器端渲染，並不會暴露給客戶端。只有當你決定將互動式島嶼模組水合到客戶端時，才會將所有必要的JavaScript程式碼傳輸到瀏覽器中。
Gatsby
Gatsby 是一個基於 React 的開源框架，具備卓越的效能、可延伸性和安全性。其最大的亮點在於與知名部署平台 Netlify 的無縫整合，這使得開發人員在整個計畫周期內都能高效地工作。Gatsby 與 Netlify 的結合帶來了驚人的構建和部署速度，比傳統方法快達 1000 倍。
Gatsby 的另一大特點是其豐富的外掛程式生態系。透過這些外掛程式，開發人員可以輕松整合各種內容源、API 和服務，實作單個網站的多元化內容展示。借助 Gatsby 的 GraphQL 數據層，數據管理變得集中且高效。此外，Gatsby 還支持伺服端渲染，即預渲染頁面時使用使用者存取時獲取的數據。
React 團隊對 Gatsby 給予了高度評價，認為它是靜態內容導向型網站的絕佳選擇。這一認可進一步突顯了 Gatsby 在提供動態和吸引人的靜態內容方面的優勢。透過使用 Gatsby，開發人員能夠快速構建高效能的網站，實作服務的無縫整合、高效的數據管理以及更快的開發與部署流程。
其他
當然，除了上面說的方式，還有很多建立 React 計畫的方式：
使用 Parcel 而不是 Vite ：Vite是一個快速的現代構建工具，但如果想嘗試一些不同的構建選項，可以考慮使用Parcel。Parcel是一個零配置的構建工具，具有出色的效能和開發者友好的使用體驗。
使用 Monorepo 設定（如Turborepo） ：如果計畫需要管理多個相關的子計畫，同時使用不同的前端框架，那麽Monorepo設定是一個不錯的選擇。Turborepo是一個Monorepo管理工具，可以方便地在計畫中整合 Next.js 和 Astro 等框架。
使用 create-t3-app 進行tRPC開發 ：如果 React 計畫需要與後端進行通訊，並且希望使用 tRPC 輕松建立型別安全的 API 呼叫，那麽 create-t3-app 是一個不錯的工具。它為React計畫提供了 tRPC 的整合支持，使得開發和維護API呼叫變得更加簡單和高效。
使用 React Native + Expo 來開發行動應用 ：如果需要開發跨平台的行動應用，React Native 是一個強大的選擇。結合 Expo 開發工具，可以更快地構建和叠代原生行動應用，並享受豐富的開發生態系和強大的跨平台支持。
使用 Tauri 或 Electron 來開發桌面套用 ：如果需要開發桌面套用，可以考慮使用 Tauri 或 Electron。Tauri 是一個基於 Rust 、最小化、快速和安全的桌面套用開發工具，而 Electron 則是一個廣泛使用的開發工具，具有強大的跨平台支持和豐富的功能庫。
小結
要搭建一個 React 計畫，首先需要確定計畫需求和目標。根據不同的需求，可以選擇適合的框架和解決方案。以下是一些建議：
Vite： 如果剛開始學習React，並希望盡可能貼近 React 的基礎知識，可以選擇使用 Vite 。Vite 提供了一種快速開發和構建套用的方法，與React一起使用可以讓你更好地理解 React 的核心概念和開發流程。
Next.js： 如果正在尋找一個基於 React 的具有多種渲染技術（和基礎架構）的框架，可以考慮使用 Next.js 。Next.js 是一個流行的 React 框架，提供了伺服端渲染（SSR）和客戶端渲染（CSR）兩種渲染方式，以及許多其他功能和工具，可以幫助你快速構建強大的套用。
Remix： 如果 Next.js 不符合你的需求，並且需要一個整合了所有伺服端渲染（SSR）功能的框架，可以嘗試使用 Remix 。Remix 是一個新興的 React 框架，專註於提供最佳的伺服端渲染和開發體驗。它具有許多先進的特性和工具，可以幫助你快速構建高品質的 React 套用。
Gatsby 和 Astro： 如果想建立一個以內容為重點的網站，可以嘗試使用 Gatsby 或 Astro 。Astro 是一個輕量級的框架，專門用於構建靜態網站和部落格。它與 React 一起使用可以輕松地建立動態和互動式的網站，同時保持效能和可延伸性。Gatsby 也是一個非常流行的 React 框架，專門用於構建靜態網站和部落格。它提供了許多強大的特性和工具，可以幫助你快速構建高品質的 React 套用。
