很多人的React 之旅，是从 CRA（create-react-app）库开始的。
但时至今日，我们发现，通过 CRA 构建项目来学习 React，却并不是一个好点子了。
为什么呢？我们拒绝 CRA 的一些原因如下：
- 与其他产品相比，构建时间更慢
- 对生成自定义的控制局限
- 缺少服务器端渲染（SSR）
- 过时，因为自 2021 年以来 CRA 再没重大更新。
反之，从传统 CRA 切换到现代 React 框架则有众多好处：可以提供更多功能；可以根据需求，例如 SSR、性能等提供多种选择。
今天，我们将介绍一些我们大家可以使用来代替 CRA 的最佳替代方案，具体涉及：
- 替代方案的功能和最适合哪种应用开发
- 一些性能指标，例如开发服务器时间、构建时间、部署时间和首次内容绘制（FCP）。
这些顶级 React 框架绝对不容错过。一起来看看吧。
Next JS
Next.js by Vercel 是面向 web 的全栈 React 框架。
Component Tree
NextJS 一直是我首选的 CRA 替代方案。我用它也有很长时间了。随着一次次的更新，NextJS 在不断地改进。
轻轻松松地，使用 Nextjs，开发人员便能够大展手脚了。
特性：
- 服务器端渲染：可使用 SSR 提高性能，通过预渲染页面加快加载时间。
- API 路由：可通过 API 路由在 NextJS 中集成全栈开发。
- 自动代码切分：遵循推荐的项目结构，具有更好的代码切分，提高了性能。
- 与 Vercel 轻松集成：NextJS 由 Vercel 团队构建。因此，使用 Vercel 进行部署轻而易举。
最适合构建与服务器没有集成（或很少与服务器集成）的无服务器应用程序。
SSR：服务器端渲染（SSR）是一种 web 应用程序渲染技术，每次用户请求页面时，都会在服务器上生成页面的 HTML。
ViteJS
时刻准备着追赶冲锋的开发环境。哈哈~
ViteJS
Vite 在构建项目时，更注重快速、加载时间更短的性能。
与 Webpack 等传统捆绑器相比，Vite 使用的开发服务器无需捆绑整个应用程序，即可提供近乎即时的热模块替换（HMR）。
更快，更强，更高效。
特性：
- 更快的开发服务器：借助本机 ES 模块和现代浏览器功能，提供了更快的开发服务器。
- 丰富的插件支持：Vite 具有灵活的插件支持。可轻松集成插件来扩展 Vite 的功能。
- 优化的构建过程：实现了构建时 tree shaking、代码拆分和其他性能增强。
- SSR 和 SSG：Vite 还支持服务器端渲染和静态站点生成。
Vite 最适合开发性能更优越的博客网站。
SSG：静态站点生成（SSG）是一种在构建时预呈现网站 HTML 页面的方法，可为每个页面生成静态 HTML 文件。
Remix
Remix 是一个全栈式 web 框架，专注于用户界面，背靠 web 标准，提供快速、流畅且有弹性的用户体验。
图片
Remix 专注于构建更优的用户体验，可用于构建全栈应用程序。如果你熟悉 Rails 和 Laravel 这样的服务器端 MVC web 框架，那么 Remix 就是 View 和 Controller。
特性：
- 数据加载：使用加载器在渲染页面之前在服务器上获取数据。
- 轻松路由：提供基于文件的路由系统。可根据创建目录提供路由。NextJS 也支持此功能。
- 服务器端渲染：支持 SSR。
- 表单和操作：内置对表单处理和操作的支持。有助于高效管理表单提交和操作。
最适合构建需要高级路由、SSR 和注重性能的项目。
Gatsby
Gatsby 是一个基于 React 的开源框架，重视性能、可扩展性和安全性。
图片
Gatsby 是另一个基于 React 的框架，专注于构建快速、安全和优化的网站。主要用于创建静态站点，也通过 API 和集成支持动态内容。
特性：
- 服务器端生成：SSG 支持 Gatsby 可将内容预渲染为静态 HTML 文件。
- 渐进式 web 应用：Gatsby 具有内置的 PWA 功能，可通过本机应用般的功能实现快速、离线就绪的 web 体验。
- JAMstack：JavaScript、API 和 Markup 允许通过从 CDN 提供静态文件和使用 API 来构建网站。
- 内容管理系统：充当 Gatsby 的内容后端，Gatsby 将创作的内容提取到静态站点构建进程中。
最适合通过 Gatsby 使用内容管理系统构建博客了。
性能比较
在详细介绍了每个框架之后，现在让我们来看一下它们的性能指标，例如开发服务器启动、构建时间、部署时间和首次内容绘制所需要花费的时间。
我尝试着在每个框架中创建相同的项目，这个 CSS 动画包含图像和 JSX 元素。
开发服务器
图片
注：框架旁的数字是所花费的时间，单位为秒。
正如你在图表中看到的，ViteJS 运行服务器的速度那是相当的快，而 Gatsby 最慢。这也是 ViteJS 敢声称自己是最快框架之一的原因。
构建时间
图片
我们发现，ViteJs 也是完成构建过程最快的。Gatsby 的构建时间倒数第一。而 NextJS 与 Gatsby 慢得半斤八两。
部署时间
图片
所有框架都部署在 vercel 上。
Vite 最快，12 秒，NextJS 和 Gatsby 最慢。Remix 在所有指标中都保持着第二的位置。
FCP - 桌面
这次神奇了，Nextjs 和 Gatsby 最快，ViteJs 和 Remix 最慢。但话说回来，它们之间差异很小，只相差 0.1 秒。
结论
总之，虽然 Create React App（CRA）对许多开发人员来说是一个很好的起点，但现在我们有了更高级、功能更丰富的替代方案：NextJS、ViteJS、Remix 和 Gatsby ，这些框架每一个都具有针对不同用例量身定制的独特优势。
- NextJS 非常适合用于通过无缝 Vercel 集成构建服务器渲染的应用程序。
- ViteJS 的性能非常出色，尤其是在开发速度方面，是优先考虑快速构建时间的绝佳选择。
- Remix 为全栈应用程序提供了强大的解决方案，专注于高级路由、服务器端渲染和丰富的用户体验。
- Gatsby 仍然是静态站点生成的有力竞争者，尤其是对于受益于内置性能优化和 PWA 功能的内容密集型站点。
总而言之，框架的选择取决于特定的项目需求，取决于你需要性能、服务器端渲染、易于部署还是全栈功能。
从 CRA 转向这些现代替代方案可以大大增强开发体验，加速收获项目成果。
