Next.js、Gatsby 和 Remix。哪个适合项目？• Flexmonster

最新推荐文章于 2024-09-11 15:33:18 发布

sanbaofengs

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量442

点赞数

文章标签： javascript 开发语言 ecmascript

Next.js、Gatsby 和 Remix。哪个适合项目？• Flexmonster

React 的流行已经超出了前端开发的范围，现在它被用于不同的开发目的。这种扩展导致了新框架的出现，其目标是增强开发人员体验、优化流程和解决特定挑战。 React 的主要挑战之一是由于客户端渲染而导致 SEO（搜索引擎优化）困难。

在本文中，我们将探讨 3 个备受关注的基于 React 的框架 - Next.js、Gatsby )、和混音。这些框架因其能够提高 Web 性能、增强搜索引擎优化 (SEO)、提供出色的开发人员体验以及解决可扩展性和可维护性挑战而广受欢迎。

本文探讨了每个框架的主要功能和优点，重点介绍了它们对 Web 开发和整体用户体验的影响。我们的目标不是决定哪个框架更好或更强大。相反，我们想找出最适合您项目需求的方法。

Next.js 用于 Web 开发的优点和缺点

Next.js 是 Vercel 构建的前端常用 JavaScript 框架。它于 2016 年出现，允许创建静态和动态 JAMstack 网站。

Next.js 是一个框架，可帮助您使用 React 构建闪电般快速且用户友好的静态网站和 Web 应用程序。

[ 插图展示了 Next.js 框架的工作原理 ](https://static .flexmonster.com/uploads/2023/07/27093124/next-js-scheme-.png)

Next.js 的优点

混合数据渲染功能可以根据应用程序的具体要求灵活地以各种格式呈现内容。有两种主要方法可以实现此目的：服务器端渲染（SSR）或静态站点生成。您还可以通过客户端呈现 (CSR) 或这些方法的组合来更新或创建内容。

Turbopack：在 v13 中，他们发布了新的捆绑器，据称对于大型项目来说，它的运行速度比 Vite 快 10 倍。据说它是作为 Webpack 的后继者创建的，但他们并不承诺支持所有

在这里插入图片描述

Webpack 插件。

路由 - Next.js 允许您根据项目的目录结构指定路由。只需向目录页面添加入口点，您就可以轻松地为应用程序创建新路径。

React 建议使用包含路由功能的框架，大多数应用程序和网站最终需要。然而，我们在网上发现了一些关于路线的负面评论。我们还咨询了测试 Next.js 的团队成员；这是他的想法：

我发现 Next.js 13 中引入了新的 App Router，它非常方便、强大且易于使用有前途的功能。
路由的工作方式直观且直接。文件夹用于在 URL 路径中创建分段（例如“/settings/security/”）。要制作叶子段，请在文件夹中创建一个“page.js”文件，以便可以公开访问 URL 路径。例如，要定义“/settings/security/password” URL 路径，请创建“settings/security/password”文件夹并将“page.js”文件放置在最后一个文件夹中。看，这相当简单！
此外，我喜欢设置动态路由是多么容易，如果你需要创建一个博客！
当然，还有改进的空间。但 App Router 展现了很大的前景，可以让您的开发过程更加顺利和方便！

支持 TypeScript 和 CSS 解析器。
零配置 – 提供立即针对生产进行优化的自动编译和捆绑。
内置图像组件和自动图像优化。
自动代码分割 - 通过自动分割代码来减小页面大小。仅在需要时才提供组件，从而实现优化的性能。此外，模块也可以自动导入。
增量静态再生 - 通过在后面重新渲染页面来更新页面的能力当交通到达时地面。这个动态过程将静态内容转换为动态内容，确保您的网站保持最新状态并响应用户交互。
快速刷新 - 无缝、快速的实时编辑体验。此功能的操作方式与热模块更换 (HMR) 类似，可确保高效、轻松的开发。
SEO（搜索引擎优化）

Next.js 将 SEO 视为重中之重，并提供了一个强大的平台，用于在您的 Web 应用程序中实现高质量的 SEO Web 指标（内置头组件用于管理 SEO 元信息，如标题、描述、规范和 Open Graph 标签版本 13）

字体优化
图片优化
自定义头部组件
自定义脚本组件
自定义链接组件

搜索引擎优化 (SEO) 对于寻求在线成功的公司至关重要，因为前五个有机搜索[结果捕获了所有点击的 67.6%](https://www.forbes.com/sites/forbesagencycouncil/2017/10/30/ 搜索结果排名的值/?sh=6496f7c944d3)。进入谷歌搜索结果的顶部对于企业来说至关重要。它可以帮助网站吸引潜在客户的注意并增加流量。

[！显示 SEO 排名与公司利润之间相关性的图表](https: //static.flexmonster.com/uploads/2023/07/27094739/SEO-benefits-on-Nextjs.png)

Next.js 的缺点

与 React 相比，缺乏文档使得开发人员（尤其是新手）很难找到全面的资源和指导。
与 React 相比，社区规模较小 - 用于解决问题或寻求指导的可用资源、教程和社区支持较少。
插件少——与其他框架相比，易于适应的插件选择相对有限。糟糕的插件生态系统可能需要您构建自定义解决方案或花费额外的时间调整现有插件以与 Next.js 配合使用。
在 Next.js 中进行某些更改通常需要开发工作。虽然 Next.js 是一个灵活的 Web 开发框架，但它也具有很高的复杂性，使得某些更改难以实施。
没有内置状态管理器 - Next.js 没有内置状态管理解决方案。为了管理复杂的应用程序状态，开发人员必须依赖外部库或框架，例如 Redux 或 MobX。
固执己见 - Next.js 有一种特定的做事方式，这可以被视为固执己见。开发人员可能需要调整他们的编码实践并遵守框架的约定，例如基于文件的路由。
后端开发复杂度高 - Next.js 主要专注于服务端渲染，需要比其他前端框架更深入地了解后端概念。

Gatsby Web 框架的优缺点

Gatsby 是一个开源前端框架，专门用于构建无缝运行的静态网站。借助 Gatsby，用户可以轻松地从其用户群中可用的各种数据源收集信息并获得见解。它也称为静态站点生成器 (SSG)。

主要特征：

能够整合多个来源的数据
与各种内容交付网络 (CDN) 顺利集成。
拥有自己的托管 Gatsby 云系统（43$/m 起）
内置性能优化
PRPL模式
安全

[ 展示 Gatsby 框架如何工作的图表。该图由四个主要组件组成：数据源、Gatsby Build、Gatsby Site 和 Gatsby Cloud。 ](https://static.flexmonster.com/uploads/2023/07/27100353 /Gatsby-framework-illustration-.png)

盖茨比的优点

Gatsby 云托管 - 自己的低成本托管服务，提供快速的性能、可扩展性和安全性。有不同的定价选项可满足不同的需求（每月 50 美元起）。
不断壮大的开发者社区。 GitHub 上有许多不同的社区。
Discord 和其他平台，每个人都可以找到许多问题的解决方案。
插件：Gatsby 拥有丰富的插件、主题和启动器生态系统，可与框架顺利集成并提供丰富的功能。
Gatsby 提供了广泛的 API，可以简化静态网站的开发。
轻松持续集成和持续交付（CI/CD）。每次进行更改时，您都可以自动将网站部署到生产环境，从而节省时间。这也有助于确保您的网站始终是最新的。
PRPL - 推送、渲染、预缓存和延迟加载，适合互联网连接较差的设备的策略
TypeScript 和 CSS 解析器支持。

盖茨比的缺点

有限的动态内容处理：Gatsby 针对静态站点和静态内容进行了优化。
增加建设d 时间：由于 Gatsby 在构建过程中生成静态页面，因此构建时间会随着内容的增加而增加。
有限的服务器端渲染控制：Gatsby 在构建过程中执行大部分渲染和数据获取。虽然它支持服务器端渲染，但与专门为服务器端渲染设计的框架相比，控制 SSR 进程或对其进行广泛自定义可能更具挑战性。

从 CMS 切换到 Gatsby 的缺点

（我们发现 Gatsby 的大多数缺点都是从从 WordPress 转向 Gatsby 的角度编写的，只是为了了解对于大多数用户来说，Gatsby 与 Next.js 完全不同，有着不同的期望。）

了解新框架：从 WordPress 等 CMS 切换到 Gatsby 的人可能会发现学习或理解新系统具有挑战性，这会暂时降低生产力。
作为 SPA 运行，这意味着 Google 跟踪代码管理器和 Google Analytics 需要进行额外配置才能识别不同的路线

Remix Web 框架的优缺点

Remix 是一个全栈 Web 开发框架，可让您专注于用户界面。它通过 Web 基础原理提供快速、流畅且有弹性的用户体验，可以部署到任何 Node.js 服务器，也可以在边缘的非 Node.js 环境中使用，例如 Cloudflare Workers。

[ Remix 框架工作流程 ](https://static.flexmonster.com/uploads/2023/ 07/27102149/remix-framework.png)

主要特征：

开源
仅限 SSR
嵌套路由
无客户端状态

Remix 的优点

全栈框架：
- 客户端和服务器同一个框架
- 前端+后端代码位于一个存储库中
- 在后台使用 Fetch API，对于开发人员来说，它看起来就像直接从客户端部分运行服务器功能。
过渡和乐观的用户界面
- Remix 的乐观 UI 策略通过在应用程序内实现快速导航来优化用户体验。它创建了单页面应用程序的感觉，加载时间更流畅，同时保持服务器端渲染功能。
免费模板（他们称之为堆栈）具有许多功能（例如 CI/CD、数据库和身份验证），可以轻松上手。
资产导入功能 - 您可以将任何文件导入到您的模块中，例如图像。
所有功能都侧重于性能和 SSR。
所有 React 库和 Typescript 都可以与 Remix 一起使用。

Remix 的缺点

响应能力：Remix 应用程序部署到边缘并缓存数据时速度很快。但是，如果缓存未命中，可能需要一段时间才能获取数据并呈现 UI
Remix 还不支持 CSS 模块
文件夹路由结构（如Next.js）
Remix 没有内置对 Web 套接字或 SSE（服务器发送事件）的支持
无API：前端和后端代码紧密耦合。 Remix 将此作为一项功能进行宣传，但一些用户表示他们习惯于拥有 API
小社区
Remix 在底层使用了很多“魔法”，这可以为适合 Remix 模型的项目提供出色的开发人员体验。然而，这也会使定制变得更加困难，因为如果您想进行更改，您需要了解“魔法”是如何工作的。

人气

让我们仔细看看这些框架的受欢迎程度。首先，我们将从 NPM 注册表分析它们的下载统计数据。在过去的一年里，Next.js 经历了持续增长，表明其越来越受欢迎。这一趋势也反映在 2023 年 Stack Overflow 调查中。在调查的“最受欢迎的 Web 框架和技术”部分中，Next.js 领先于其他两个框架。

如果我们深入研究之前的研究，我们会发现盖茨比已经存在相当长一段时间了。然而，它的流行高峰出现在 2020-21 年。 Netlify 收购 Gatsby 可能会重振其人气并恢复活力为平台注入新的活力。而Next.js去年才出现在调查中，今年已经进入前十名。