最近 React 發(fā)布了全新的文檔，文檔中已經(jīng)不再將 create-react-app (CRA) 作為搭建 React 應(yīng)用的推薦方式，而是推薦了很多其他方式，包括 Vite、Next.js、Remix、Gatsby 等，下面就分別看看這些方式都有哪些優(yōu)缺點(diǎn)，2023年該如何做出選擇！

Vite

Vite 很顯然是 create-react-app (CRA) 的繼任者，因?yàn)樗c CRA 沒有太大的區(qū)別。與 create-react-app（使用 Webpack）相比，它要快得多，因?yàn)樗诘讓邮褂昧薳sbuild。

和 create-react-app (CRA) 一樣，Vite 也更傾向于使用客戶端路由和渲染來創(chuàng)建單頁面應(yīng)用（SPA）。然而，由于服務(wù)端渲染（SSR）越來越受到重視，因此在 Vite 中它作為一個(gè)可選功能提供。

如果已經(jīng)在使用 create-react-app（CRA），那么遷移到 Vite 是非常簡單的。Vite 的 vite.config.js 文件以及特定功能的文件（例如 tsconfig）只需進(jìn)行少量配置，就可以使用 TypeScript、ESLint 和 SSR 等可選功能了。

在 Vite 中允許開發(fā)者在沒有框架的情況下使用 React。開發(fā)者可以自由選擇用于路由、數(shù)據(jù)獲取、狀態(tài)管理和測試的 React 庫。與所有 React 框架相比，它不會強(qiáng)制要求在項(xiàng)目級別上使用任何特定的 React 功能、庫或配置。

Vite 鼓勵初學(xué)者在沒有框架的干擾下學(xué)習(xí) React 及其基礎(chǔ)知識。當(dāng)使用 Vite 時(shí)，一個(gè)初學(xué)者可以專注于學(xué)習(xí) React 和它的核心特性，而不需要受到框架的限制。相比之下，在使用框架的環(huán)境中學(xué)習(xí) React 時(shí)，React 幾乎處于被動狀態(tài)，必須要遵循框架的意圖來進(jìn)行學(xué)習(xí)。

React + Vite 的優(yōu)勢：

• 幾乎可以替代 create-react-app（CRA）
• 仍然支持 SPA/CSR，但 SSR 是可選的
• 沒有框架/公司的束縛
• 輕量級
• 不會對 React 的功能進(jìn)行干擾。因此，可以將重心放在 React 本身，而不是框架上
• 對于了解 React 基本原理的開發(fā)者來說，學(xué)習(xí)曲線比較平緩

React + Vite 的缺點(diǎn)：

• Vite 更注重單頁應(yīng)用（SPA）/客戶端渲染（CSR）的支持。
• 沒有框架的支持
• 無法使用 React 為集成框架提供的體系結(jié)構(gòu)特性，例如 React 服務(wù)器組件（RSC）。

為什么 Vite 可能不會成為 React 文檔中的默認(rèn)工具：

• 它使用 SPA/CSR 而不是 SSR。
• 技術(shù)鎖定使開發(fā)人員無法使用所有可用的 React 功能，比如 React 服務(wù)器組件（RSC）。
• 它不能貢獻(xiàn)于以下愿景：構(gòu)建一個(gè) React 框架、實(shí)現(xiàn)多樣化渲染技術(shù)、以及實(shí)現(xiàn)所有可用的 React 特性，例如 React 服務(wù)器組件（RSC）。
• 它不關(guān)注任何特定的框架（包括 React）。
• 對于 Vite 的創(chuàng)建者尤雨溪來說，React 并不是 Vite 的優(yōu)先考慮。

Next.js

Next.js 作為框架是最成熟的，因此當(dāng) React 開發(fā)人員想要在框架環(huán)境中使用 React 時(shí)，這可能是最好的選擇。它包含許多內(nèi)置的功能（例如基于文件的路由）。如果 Next.js不適合你，可以看看去年開源的 Remix 框架；它與 Next.js 的不同之處在于它專注于 Web 標(biāo)準(zhǔn)。

Next.js 更注重服務(wù)端渲染（SSR）作為渲染技術(shù)。然而，它也可以與靜態(tài)網(wǎng)站生成（SSG）和客戶端渲染（CSR）一起使用。此外還有一些更渲染技術(shù)可用，如增量靜態(tài)再生（ISR）和 React 服務(wù)器組件（RSC）。另外，可以在 Next.js 應(yīng)用中混合使用這些渲染技術(shù)。例如，一個(gè)營銷頁面可以使用 SSG，而注冊/登錄功能使用 SSR。

然而，使用這么多強(qiáng)大的功能需要付出代價(jià)：不同的渲染技術(shù)會增加工程開銷，框架不斷地開發(fā)新的渲染技術(shù)，因此最終會改變其優(yōu)先順序，而且并不是所有開發(fā)者都能跟得上這個(gè)速度。盡管 Next.js 在過去沒有引入破壞性變化，做得非常好，但在推動 JavaScript/React 渲染到后端的前沿工作中，總會有新的標(biāo)準(zhǔn)/配置。

總之，雖然 React 本身（例如使用Vite）相對穩(wěn)定，但在 Next.js 生態(tài)系統(tǒng)中肯定會看到變化，因?yàn)樗菍?React 引入服務(wù)端領(lǐng)域的開路先鋒。

Next.js 的優(yōu)點(diǎn)：

• 帶有內(nèi)置庫的的框架
• SSR和許多其他渲染技術(shù)
• 提高性能
• 與CSR相比，具有改進(jìn)的SEO
• Vercel 作為擁有大量資金的重要參與者
• 與 React 核心團(tuán)隊(duì)密切合作
• 雇用了許多 React 核心團(tuán)隊(duì)成員
• 在前沿領(lǐng)域工作

Next.js 的缺點(diǎn)：

• 與只使用 React + Vite 相比，會增加開銷/穩(wěn)定性/可維護(hù)性
• 相對于React + Vite，學(xué)習(xí)曲線更陡峭
• 更多關(guān)注框架特定內(nèi)容，而非 React 本身
• 框架綁定

為什么 Next.js 可能是 React 文檔中的默認(rèn)選擇：

• 它是最成熟的框架，符合 React 的框架的目標(biāo)
• SSR 是一等公民，符合 React 的 SSR 目標(biāo)
• 使用了React的所有基本原語，例如React Server Components (RSC)
• 不優(yōu)先考慮“老式”SPA/CSR
• 與 React 及其核心團(tuán)隊(duì)密切關(guān)系，與React核心團(tuán)隊(duì)合作實(shí)現(xiàn)Next中的新功能，并最終由Meta/Facebook 使用

Astro

Astro 允許開發(fā)人員創(chuàng)建以內(nèi)容為中心的網(wǎng)站。由于其 island 架構(gòu)和選擇性水合作用，它默認(rèn)為每個(gè)網(wǎng)站提供了快速性能。因此 SEO 相關(guān)的網(wǎng)站可以從使用 Astro 中受益。

從實(shí)現(xiàn)的角度來看，Astro更傾向于多頁面應(yīng)用（MPA）的概念，而不是單頁面應(yīng)用（SPA）。Astro 是一個(gè)與框架（此處為 React）無關(guān)的解決方案。因此，可以使用 Astro 的內(nèi)置組件語法或選擇的框架（例如 React）。該框架僅用于服務(wù)端渲染，不會暴露給客戶端。只有當(dāng)決定為客戶端添加一個(gè)交互式 island 時(shí)，它才會將所有必需的 JavaScript 代碼發(fā)送到瀏覽器。

在以內(nèi)容為中心的網(wǎng)站方面，Astro 被視為 Gatsby 的競爭對手。在過去的幾年里，Gatsby 在與 Next 的競爭中失敗了。在這場競爭中，可能過于關(guān)注與 Next 的功能平衡（例如 SSR），因此較少關(guān)注真正重要的開發(fā)者體驗(yàn)和以內(nèi)容為中心的網(wǎng)站的性能方面。這給了Astro一個(gè)機(jī)會成為可行的替代選擇。

總之，即使是 Next（具有SSR / SSG / ISR）或 Gatsby 也適用于面向內(nèi)容的網(wǎng)站，Astro 作為競爭對手雖然相對較新，但似乎更適合具有面向內(nèi)容的網(wǎng)站的更具體要求（性能，注重內(nèi)容生產(chǎn)（例如MDX））。

相比之下，支持使用 Next 的唯一事實(shí)是：它混合了渲染技術(shù)，因此可以在同一個(gè)應(yīng)用中實(shí)現(xiàn)性能優(yōu)化的營銷頁面和隱藏在登錄后面的實(shí)際應(yīng)用。但根據(jù) Astro 的基準(zhǔn)測試結(jié)果，它的性能仍然較低（不考慮 RSC，因?yàn)檫€不穩(wěn)定），因此可以在現(xiàn)代 Monorepo 設(shè)置中混合使用 Next 和 Astro，以便同時(shí)擁有 Web 應(yīng)用和網(wǎng)站。

React + Astro 的優(yōu)點(diǎn)：

• 面向內(nèi)容的網(wǎng)站
• 性能
• SEO

React + Astro 的缺點(diǎn)：

• 不適用于動態(tài)Web應(yīng)用

為什么它可能不是 React 文檔中的默認(rèn)設(shè)置：

• 不與框架綁定
• React不是Astro的重點(diǎn)
• 不與React的新功能對齊，例如 React Server Components
• 每次鏈接點(diǎn)擊都會重新加載整個(gè)頁面，因此，對于導(dǎo)航而言不是最佳的 UX。

其他

除了上述方式之外，還有一些其他創(chuàng)建 React 應(yīng)用的方式：

• 使用 Parcel^[1] 而不是 Vite
• 使用 Monorepo（例如Turborepo），可選擇使用Vite、Next和/或Astro
• 使用 create-t3-app^[2] 來進(jìn)行 tRPC 開發(fā)
• 使用 React Native^[3]/Expo^[4] 開發(fā)移動應(yīng)用
• 使用 Tauri^[5] / Electron^[6] 開發(fā)桌面應(yīng)用

使用 React 之外的其他庫來啟動 SSR 項(xiàng)目：

• SvelteKit
• SolidStart
• QwikCity

總結(jié)

• 從 React 初學(xué)者的角度，可以選擇使用 Vite + React，因?yàn)樗M可能地接近 React 的基本原理。如果只需要一個(gè)輕量級的單頁應(yīng)用/客戶端渲染解決方案，也可以選擇 Vite + React。
• 如果正在尋找在 React 之上的框架，其包含了幾種渲染技術(shù)（和基礎(chǔ)設(shè)施），推薦使用 Next + React 作為最成熟的解決方案。
• 如果 Next.js 不符合需求，但仍在尋找一個(gè)內(nèi)置了所有功能的服務(wù)端渲染的框架，可以看看 Remix + React。
• 如果想做一個(gè)面向內(nèi)容的網(wǎng)站，請查看 Astro + React。

參考：https://www.robinwieruch.de/react-starter/。

相關(guān)鏈接

[1]Parcel: https://parceljs.org/?。

[2]create-t3-app: https://create.t3.gg/?。

[3]React Native: https://reactnative.dev/?。

[4]Expo: https://expo.dev/?。

[5]Tauri: https://tauri.app/?。

[6]Electron: https://www.electronjs.org/?。

文章標(biāo)題：2023年如何搭建新的React項(xiàng)目？
鏈接分享：http://uogjgqi.cn/article/djcgiho.html