介紹
學習React的時候，我們都是從CRA(create-react-app)函式庫開始。這是開始 React 之旅的好地方，但今天使用它來建立專案並不是一個好主意。以下是目前避免 CRA 的一些原因：
-
與替代方案相比，建置時間更慢
-
對建構定制的控制有限
-
缺乏伺服器端渲染（SSR）
-
已過時，因為自 2021 年以來 CRA 沒有重大更新。
正如您所看到的，從傳統 CRA 切換到現代 React 框架有很多原因，它可以提供更多功能。根據您的要求，例如 SSR、性能等，有多種選擇。
今天，我們將研究一些您可以用來代替 CRA 的最佳替代方案。我們將要討論
-
每種選擇
-
它們的功能以及適合哪種應用程式開發的最佳套件
-
一些效能指標，例如開發伺服器時間、建置時間、部署時間和首次內容繪製。
我希望這能讓你興奮。現在，讓我們開始吧。
Next.js
Vercel 的 Next.js 是 Web 的全端 React 框架。
NextJS 是我首選的 CRA 替代方案。我已經使用它很長時間了。隨著每次更新，NextJS 都在不斷改進。它們提供了大量功能，可讓開發人員輕鬆使用 Nextjs 建置專案。
特徵：
-
伺服器端渲染：透過使用 SSR 可以提高效能，並使用預先渲染頁面來加快載入時間。
-
API路由：透過API路由，我們可以在NextJS中整合全端開發。
-
自動程式碼分割：遵循建議的專案結構，我們可以有更好的程式碼分割。從而提高性能。
-
與 Vercel 輕鬆整合：NextJS 由 Vercel 團隊建置。因此，使用 Vercel 進行部署變得很容易。
它最適合建立與伺服器沒有或很少整合的無伺服器應用程式。
筆記：
伺服器端渲染：伺服器端渲染 (SSR) 是一種 Web 應用程式渲染技術，每次使用者要求時，都會在伺服器上產生頁面的 HTML。
ViteJS
準備好迎接最終能趕上您的開發環境。
Vite更注重效能，建立快速且載入時間更少的專案。與 Webpack 等傳統捆綁器相比，Vite 使用開發伺服器提供近乎即時的熱模組更換（HMR），而無需捆綁整個應用程式。這樣，他們就可以擁有更快的開發伺服器。
特徵：
-
更快的開發伺服器：憑藉本機 ES 模組和現代瀏覽器功能，它提供了更快的開發伺服器。
-
豐富的插件支援：Vite擁有靈活的插件支援。您可以輕鬆整合不同的插件來擴充Vite的功能。
-
最佳化的建置過程：樹搖動、程式碼分割和其他效能增強是在建置時實現的。
-
SSR和SSG ：Vite還支援伺服器端渲染和靜態網站產生以獲得更好的效能。
Vite 用於開發具有更好性能的作品集或部落格網站的最佳套件。
筆記：
SSG：靜態網站產生 (SSG) 是一種在建置時預先渲染網站 HTML 頁面的方法，為每個頁面產生靜態 HTML 檔案。
Remix
Remix 是一個全端 Web 框架，可讓您專注於使用者介面並透過 Web 標準進行工作，以提供快速、流暢且有彈性的使用者體驗。
Remix 專注於打造更好的使用者體驗。它可用於建立全端應用程式。如果您熟悉 Rails 和 Laravel 等伺服器端 MVC Web 框架，那麼 Remix 就是視圖和控制器。
特徵：
-
資料載入：它在渲染頁面之前使用載入器在伺服器上取得資料。 0
-
Easy Routing ：它提供了基於檔案的路由系統。它根據您要建立的目錄提供路由。 NextJS 也支援此功能。
-
伺服器端渲染：它還支援SSR以提供更好的效能。
-
表單和操作：Remix 包括對表單處理和操作的內建支援。這有助於有效管理表單提交和操作。
它最適合建構需要高階路由、SSR 並注重效能的專案。
Gatsby
Gatsby 是一個基於 React 的開源框架，具有內建的效能、可擴展性和安全性。
Gatsby 是另一個基於 React 的框架，專注於建立快速、安全和優化的網站。它主要用於建立靜態站點，但也透過 API 和整合支援動態內容。
特徵：
-
伺服器端產生（SSG） ：它還支援 Gatsby 並將內容預先渲染到靜態 HTML 檔案。
-
漸進式 Web 應用程式：Gatsby 具有內建 PWA 功能，可透過類似本機應用程式的功能實現快速、離線就緒的 Web 體驗。
-
JAMstack ：JavaScript、API 和標記讓您可以透過從 CDN 提供靜態檔案並使用 API 來建立網站。
-
內容管理系統：在 Gatsby 中，它充當創作內容的後端，Gatsby 將此內容拉入其靜態網站建置流程。
透過 Gatsby 使用內容管理系統建立部落格的最佳套件。
效能比較
我們研究了每個框架的功能以及最適合的內容類型。現在讓我們研究一些效能指標，例如開發伺服器啟動所需的時間、建置時間、部署時間和首次內容繪製。
我使用包含圖像和 JSX 元素的 CSS 動畫在每個框架中建立此專案。現在，內容保持不變，這使得評估效能變得容易。
開發伺服器
注意：框架名稱旁邊的數字是所花費的時間。這是以秒為單位的。
如圖所示，ViteJS 執行伺服器的速度相當快，而 Gatsby 是最慢的。事實上，ViteJS 聲稱是最快的框架之一。
建構時間
在這裡，ViteJs 也是最快完成建造過程的。 Gatsby 的建造時間仍然是最慢的。 NextJS 幾乎是最慢的。
部署時間
所有框架都部署在vercel上。
Vite 最快，為 12 秒，NextJS 和 Gatsby 最慢。 Remix 在各項指標中均維持第二名的位置。
第一個內容豐富的繪畫 - 桌面
雖然桌面上每個框架的總分都是 100 分，但在第一張內容繪製上略有不同。
Nextjs 和 Gatsby 的速度最快，而 ViteJs 和 Remix 的速度最慢。它們之間的差異低至 0.1 秒。
您可以在此處詳細查看每個 PageSpeed Insight：
與我聯絡🚀
讓我們保持聯繫並了解所有技術、創新及其他方面的資訊！
另外，如果您有興趣，我願意撰寫自由文章，然後透過電子郵件或社交媒體與我聯繫。
結論
總而言之，雖然 Create React App (CRA) 對於許多開發人員來說是一個很好的起點，但顯然現在有更先進、功能豐富的替代方案可用。我們審查的每個框架（NextJS、ViteJS、Remix 和 Gatsby）都提供了不同用例量身定制的獨特優勢。
-
NextJS非常適合希望透過無縫 Vercel 整合來建立伺服器渲染應用程式的開發人員。
-
ViteJS以其效能出眾，尤其是開發速度，對於優先考慮快速建置時間的專案來說是一個絕佳的選擇。
-
Remix為全端應用程式提供了強大的解決方案，專注於進階路由、伺服器端渲染和豐富的使用者體驗。
-
Gatsby仍然是靜態網站生成的有力競爭者，特別是對於受益於其內建效能優化和 PWA 功能的內容豐富的網站。
最終，框架的選擇取決於您的特定專案需求 - 無論是效能、伺服器端渲染、易於部署還是全端功能。從 CRA 轉向這些現代替代方案之一可以大大增強您的開發體驗和專案成果。
我希望本文能幫助您了解可以在下一個專案中使用的 CRA 替代方案。
原文出處：https://dev.to/surajondev/comparing-the-top-cra-alternatives-9cg
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式