React 的流行已經(jīng)超越了前端開發(fā)，現(xiàn)在它被用于不同的開發(fā)目的。這種擴(kuò)展導(dǎo)致了新框架的出現(xiàn)，這些框架的目標(biāo)是增強(qiáng)開發(fā)者體驗(yàn)、優(yōu)化流程和解決特定的挑戰(zhàn)。React 的主要挑戰(zhàn)之一是由于客戶端渲染而與 SEO(搜索引擎優(yōu)化)的斗爭。

在本文中，我們將探討 3 個備受關(guān)注的基于 React 的框架--Next.js[1]、Gatsby[2] 和 Remix[3]。我們將討論它們的優(yōu)勢和缺點(diǎn)，并討論如何選擇適合你的項(xiàng)目的框架。

Next.js 在 Web 開發(fā)中的優(yōu)缺點(diǎn)

Next.js 是 Vercel 構(gòu)建的前端常用 JavaScript 框架。它出現(xiàn)于 2016 年，可以創(chuàng)建靜態(tài)和動態(tài)的 JAMstack 網(wǎng)站。

Next.js 是一個框架，它可以幫助你使用 React 構(gòu)建靜態(tài)網(wǎng)站和 Web 應(yīng)用程序，這些網(wǎng)站和應(yīng)用程序既快又好用。

圖片

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

混合數(shù)據(jù)渲染特性提供了根據(jù)應(yīng)用程序特定需求以各種格式呈現(xiàn)內(nèi)容的靈活性。

實(shí)現(xiàn)此功能的主要方法有兩種：服務(wù)器端渲染(SSR)或靜態(tài)站點(diǎn)生成。您還可以通過客戶端渲染(CSR)或這些方法的組合來更新或創(chuàng)建內(nèi)容。

圖片

Turbopack

在 v13 中，他們宣布了新的打包工具，聲稱對于大型項(xiàng)目來說，它比 Vite 快 10 倍，據(jù)稱它是作為 Webpack 的繼任者創(chuàng)建的，但他們不承諾支持所有的 Webpack 插件。

路由

Next.js 允許你根據(jù)項(xiàng)目的目錄結(jié)構(gòu)指定路由。通過簡單地添加一個入口點(diǎn)到目錄頁面，你可以輕松地為應(yīng)用創(chuàng)建一個新的路徑。

React 推薦[4]使用包含路由功能的框架，大多數(shù)應(yīng)用程序和網(wǎng)站最終都需要路由功能。不過，我們在網(wǎng)上發(fā)現(xiàn)了一些關(guān)于路由的負(fù)面評論。我們還咨詢了測試過 Next.js 的團(tuán)隊成員；以下是他對此的看法：

我發(fā)現(xiàn) Next.js 13 中引入的新 App Router 是一個非常方便、強(qiáng)大且有前途的功能。

路由的工作方式直觀而簡單。文件夾用于在 URL 路徑中創(chuàng)建段（例如，/settings/security/）。要創(chuàng)建葉段，可在文件夾中創(chuàng)建一個 page.js 文件，這樣 URL 路徑就能被公開訪問。例如，要定義 /settings/security/password URL 路徑，可創(chuàng)建 settings/security/password 文件夾，并在最后一個文件夾中放置 page.js 文件。瞧，相當(dāng)簡單吧！

此外，我喜歡它設(shè)置動態(tài)路由的簡單性，如果你需要創(chuàng)建一個博客，這非常棒！

當(dāng)然，還有改進(jìn)的空間，但 App Router 顯示了很大的潛力，可以使您的開發(fā)過程更加順暢和方便！

支持 TypeScript 和 CSS 解析器。

零配置

提供自動編譯和捆綁優(yōu)化，以立即投入生產(chǎn)。

內(nèi)置圖像組件和自動圖像優(yōu)化。

自動代碼分割

通過自動分割代碼來減少頁面大小。組件只在需要時才提供，從而優(yōu)化性能。此外，模塊也可以自動導(dǎo)入。

增量靜態(tài)再生

在流量到達(dá)時，通過在后臺重新渲染來更新網(wǎng)頁。這一動態(tài)過程可將靜態(tài)內(nèi)容轉(zhuǎn)化為動態(tài)內(nèi)容，確保您的網(wǎng)站始終保持最新，并對用戶交互做出響應(yīng)。

快速刷新

無縫和快速的實(shí)時編輯體驗(yàn)。此功能的操作類似于熱模塊替換(HMR)，確保高效和輕松的開發(fā)。

SEO(搜索引擎優(yōu)化)

Next.js 將 SEO 視為關(guān)鍵優(yōu)先事項(xiàng)，并提供了一個強(qiáng)大的平臺，用于在您的 Web 應(yīng)用程序中實(shí)現(xiàn)高質(zhì)量的 SEO 網(wǎng)絡(luò)指標(biāo)(內(nèi)置頭部組件，用于管理 SEO 元信息，如標(biāo)題、描述、規(guī)范和 Open Graph 標(biāo)簽版本 13)

搜索引擎優(yōu)化（SEO）對于尋求在線成功的公司來說至關(guān)重要，因?yàn)榍拔鍌€有機(jī)搜索結(jié)果占據(jù)了所有點(diǎn)擊量的 67.6%。在谷歌搜索結(jié)果中名列前茅對企業(yè)來說至關(guān)重要。它可以幫助網(wǎng)站獲得潛在客戶的關(guān)注并帶來流量。

Next.js 的缺點(diǎn)

缺乏文檔

與 React 相比，缺乏文檔使得開發(fā)人員，特別是新手，很難找到全面的資源和指導(dǎo)。

社區(qū)較小

與 React 相比，社區(qū)較小 - 用于故障排除問題或?qū)で笾笇?dǎo)的可用資源、教程和社區(qū)支持較少。

插件數(shù)量少

相對于其他框架，易于使用的插件選擇相對有限。糟糕的插件生態(tài)系統(tǒng)可能需要您構(gòu)建自定義解決方案，或者花費(fèi)額外的時間來適應(yīng)現(xiàn)有的插件，以便與 Next.js 一起工作。

在 Next.js 中進(jìn)行某些更改往往需要大量的開發(fā)工作

雖然 Next.js 是一個靈活的 Web 開發(fā)框架，但它也有很高的復(fù)雜性，使得某些更改難以實(shí)現(xiàn)。

沒有內(nèi)置的狀態(tài)管理器

Next.js 沒有內(nèi)置的狀態(tài)管理解決方案。為了管理復(fù)雜的應(yīng)用程序狀態(tài)，開發(fā)人員必須依賴外部庫或框架，如 Redux 或 MobX。

高度固執(zhí)己見

Next.js 有一種做事的特定方式，可以被視為高度固執(zhí)己見。開發(fā)人員可能需要調(diào)整他們的編碼實(shí)踐，并遵守框架的約定，例如基于文件的路由。

后端開發(fā)的復(fù)雜性高

Next.js 主要關(guān)注服務(wù)器端渲染，需要對后端概念有更深入的理解，這比其他前端框架更難。

Gatsby Web 框架的優(yōu)缺點(diǎn)

Gatsby 是一個開源前端框架，專門用于構(gòu)建無縫運(yùn)行的靜態(tài)網(wǎng)站。有了 Gatsby，用戶可以毫不費(fèi)力地收集信息，并從用戶群中可用的各種數(shù)據(jù)源獲得洞察力。它也被稱為靜態(tài)網(wǎng)站生成器（SSG）。

主要特點(diǎn)：

• 從多個來源整合數(shù)據(jù)的能力
• 與各種內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)的集成。
• 擁有自己的 Gatsby 云系統(tǒng)托管(43 美元/月起)
• 內(nèi)置性能優(yōu)化
• PRPL 模式
• 安全

圖片

Gatsby 的優(yōu)點(diǎn)

• Gatsby Cloud Hosting - 提供低成本托管服務(wù)，提供快速的性能、可擴(kuò)展性和安全性。有不同的定價選項(xiàng)可供不同的需求(每月 50 美元起)。
• 一個不斷增長的開發(fā)者社區(qū)。GitHub 上有許多不同的社區(qū)。以及其他平臺，每個人都可以找到許多問題和問題的解決方案。
• 插件：Gatsby 擁有豐富的插件生態(tài)系統(tǒng)，主題和啟動器與框架平滑集成，并提供豐富的功能。
• Gatsby 提供了廣泛的 API，簡化了靜態(tài)網(wǎng)站的開發(fā)。
• 易于持續(xù)集成和持續(xù)交付(CI/CD)。每次做出更改時，您可以自動將網(wǎng)站部署到生產(chǎn)環(huán)境中，節(jié)省時間。這也可以幫助確保您的網(wǎng)站始終是最新的。
• PRPL - 推送、渲染、預(yù)緩存和惰性加載，適用于網(wǎng)絡(luò)連接差的設(shè)備的策略
• TypeScript 和 CSS 解析器支持。

Gatsby 的缺點(diǎn)

• 有限的動態(tài)內(nèi)容處理：Gatsby 針對靜態(tài)站點(diǎn)和靜態(tài)內(nèi)容進(jìn)行了優(yōu)化。
• 增加構(gòu)建時間：由于 Gatsby 在構(gòu)建過程中生成靜態(tài)頁面，因此構(gòu)建時間會隨著內(nèi)容的增加而增加。
• 有限的服務(wù)器端渲染控制：Gatsby 在構(gòu)建過程中執(zhí)行大部分渲染和數(shù)據(jù)獲取。雖然它支持服務(wù)器端渲染，但與專門為服務(wù)器端渲染設(shè)計的框架相比，控制 SSR 進(jìn)程或廣泛定制它可能更具挑戰(zhàn)性。

從 CMS 轉(zhuǎn)向 Gatsby 的缺點(diǎn)

我們發(fā)現(xiàn)的大多數(shù)針對 Gatsby 的缺點(diǎn)都是從從 WordPress 遷移到 Gatsby 的角度來寫的，只是為了理解對于大多數(shù)用戶來說，Gatsby 和 Next.js 是完全不同的，有著不同的期望。

• 理解一個新的框架：從像 WordPress 這樣的 CMS 切換到 Gatsby 的人可能會發(fā)現(xiàn)學(xué)習(xí)或理解新系統(tǒng)很有挑戰(zhàn)性，這將暫時損害生產(chǎn)力。
• 作為 SPA 操作，這意味著 Google Tag Manager 和 Google Analytics 需要額外的配置來識別不同的路由

Remix Web 框架的優(yōu)缺點(diǎn)

Remix 是一個全棧 Web 開發(fā)框架，它讓你專注于用戶界面。它通過網(wǎng)絡(luò)基本原理提供快速、流暢和彈性的用戶體驗(yàn)，可部署到任何 Node.js 服務(wù)器上，也可用于邊緣的非 Node.js 環(huán)境，如 Cloudflare Workers。

圖片

主要特點(diǎn)：

• 開源
• 只有 SSR
• 嵌套路由
• 沒有客戶端狀態(tài)

Remix 的優(yōu)點(diǎn)

• 全棧框架：客戶端和服務(wù)器的統(tǒng)一框架，前端和后端代碼在一個倉庫中，在后臺使用 Fetch API，對于開發(fā)人員來說，它看起來就像是從客戶端直接運(yùn)行服務(wù)器函數(shù)。
• Transitions 和 Optimistic UI：Remix 的 Optimistic UI 策略通過支持應(yīng)用程序內(nèi)的快速導(dǎo)航來優(yōu)化用戶體驗(yàn)。它創(chuàng)建了一個單頁應(yīng)用程序的感覺，加載時間更流暢，同時保持服務(wù)器端的渲染能力。
• 帶有許多功能(如 CI/CD、數(shù)據(jù)庫和身份驗(yàn)證)的免費(fèi)模板(他們稱之為棧)使入門變得容易。
• Asset imports 功能 - 您可以將任何文件導(dǎo)入到您的模塊中，例如圖像。
• 所有功能都專注于性能和 SSR。
• 所有 React 庫和 Typescript 都可以在 Remix 中使用。

Remix 的缺點(diǎn)

• 響應(yīng)速度：當(dāng)部署到邊緣并緩存數(shù)據(jù)時，Remix 應(yīng)用程序的速度很快。然而，如果緩存未命中，則可能需要一段時間來獲取數(shù)據(jù)并渲染 UI。
• Remix 不支持 CSS 模塊(暫無)
• 文件夾路由結(jié)構(gòu)(如 Next.js 所示)
• Remix 沒有內(nèi)置支持 Web Sockets 或 SSE(服務(wù)器發(fā)送事件)
• 沒有 API：前端和后端代碼緊密耦合。Remix 將此作為一個特性來宣傳，但一些用戶表示他們習(xí)慣于有 API。
• 小型社區(qū)
• Remix 在幕后使用了許多“魔法”，這可以為適合 Remix 模型的項(xiàng)目提供良好的開發(fā)體驗(yàn)。然而，這也可能使其更難定制，因?yàn)槿绻脒M(jìn)行更改，您需要理解“魔法”是如何工作的。

受歡迎程度

讓我們來仔細(xì)看看這些框架的流行程度。首先，我們將從 NPM 注冊中心分析它們的下載統(tǒng)計數(shù)據(jù)。在過去的一年中，Next.js 經(jīng)歷了持續(xù)的增長，表明其越來越受歡迎。這一趨勢也反映在 Stack Overflow 2023 年的調(diào)查中。在調(diào)查的“最受歡迎的 Web 框架和技術(shù)”部分，Next.js 領(lǐng)先于其他兩個框架。

如果我們深入研究以前的研究，我們會發(fā)現(xiàn) Gatsby 已經(jīng)存在了一段時間。然而，它的流行高峰發(fā)生在 2020 - 2021 年。Netlify 收購 Gatsby 可能會恢復(fù)其受歡迎程度，并為該平臺注入新的生命。

圖片

結(jié)論

總之，在考慮 Next.js、Remix 和 Gatsby 這三個選項(xiàng)時，Next.js 顯然是最成熟、最完善的框架。Next.js 擁有較大的用戶群、豐富的文檔和強(qiáng)大的社區(qū)支持，是一個可靠的選擇。它還支持靜態(tài)和動態(tài)網(wǎng)站，是適合不同使用情況的解決方案。

另一方面，如果您更看重簡單、快速和最少的設(shè)置，Remix 可能是更合適的選擇。雖然 Remix 仍處于開發(fā)階段，缺乏廣泛的示例和用例，但它已獲得了開發(fā)人員的積極反饋，未來大有可為。

至于 Gatsby，它的受歡迎程度有所下降，但由于其靜態(tài)站點(diǎn)生成能力，它仍然是一個更快、更輕量級的選擇。

總之，如果你想要一個成熟且被廣泛支持的框架，Next.js 是推薦的選擇，如果想要簡單和快速，Remix 表現(xiàn)出潛力，而 Gatsby 在性能方面仍然有優(yōu)勢。