Next.js与Remix。分析关键方面和差异

通过比较Remix和Next.js的最新版本，知道哪一个适合你

基于React的网络生态系统正在日渐完善。2021年底，Next.js推出了其伟大的12版本。它包含了大量的功能和优化。然而，不久之后，我们看到了Remix是如何发布其最新版本的。Remix团队改变了策略，决定自由和开源。

那么，在2022年开始一个项目时，我们应该选择哪一个？这是一个很难做出的选择，对你的网络应用有很大影响。每个框架都是有主见的，并将塑造你的思维方式和构建你的组件。

在这篇文章中，我们将分析每个框架的关键方面是什么，到最后，你将能够决定这些是否适合你。有些方面可能是破坏性的或决定性的因素。这一切都归结于你的使用情况和个人喜好。

在这种选择的悖论中，你只需知道这两个框架都很好，你用它们中的任何一个都不会错。

社区

Next.js框架存在的时间比Remix长。我不会把Remix的非开源时代计算在内。作为一个副作用，社区更大。我们可以期待有更多的手册、在线资源、教程，以及多年来由开发者发现的更多问题。

这里有一些高层次的数字。

Next.js项目有80k 星，而Remix有12k 。
Next.js的贡献者至今已超过一倍。
Next.js有900 ，而Remix则有400 。
Next.js已经合并了151 pull requests，而Remix则是67 pull requests 。

Next.js框架由Vercel拥有，这是一家相当有规模的公司。他们的目标很明确，那就是利用他们超强的框架来吸引更多的人加入他们的Vercel平台。另一方面，Remix在2021年3月被Via收购。他们吸纳了像Keen C Dots这样的优秀人才，而Keen C Dots正在成为他们框架的一个伟大的代言人。

架构和理念

Next.js框架是建立在NodeJs之上的。它与React生态系统高度绑定，使其几乎成为该生态系统的延伸。它试图在早期拥抱其最新的功能。Vercel团队与React团队紧密合作，以实现这一目标。他们主要提供建立在React组件之上的抽象，如：next/dynamic,next/head,next/link, ...

他们的最新版本已经包括对以下内容的支持。

React服务器端组件：无状态的组件，在服务器上渲染并流向客户端。
HTML服务器端流：逐步将HTML运送到浏览器。

你可以在配置文件中启用这两个功能。

// next.config.jsmodule.exports = {  experimental: {    concurrentFeatures: true,    serverComponents: true,  },}

来自Remix的方法明显不同。他们与React生态系统更加脱钩，更热衷于等待稳定的React功能。它是建立在Web Fetch Api （而不是Node）上的，这使得应用程序可以在任何地方运行。它专注于尽可能多地利用服务器。这有两个好处：加载数据时带宽更快，并有能力提供渐进式增强体验。

另一个巨大的区别是，Remix试图尽可能地依赖浏览器原生网络标准功能。这意味着什么？就是说他们的网页即使在禁用JavaScript的情况下也能100%发挥作用。当JavaScript可用时，整个体验就会增强。

他们的内置表单功能就是一个明显的例子。他们依靠基本的Form 浏览器功能。表单动作总是在服务器上发布和执行。那是验证/重定向/数据库逻辑将发生的地方。

当JavaScript可用时，就会发生xhr 请求，否则，传统的HTTP Post 就会发生作用。

我们唯一需要做的是在根页面中导出一个action 函数，并使用其内置的表单 API 抽象。

数据加载

Next.js

在Next.js中，你可以细化配置你的数据如何从你的网络应用中加载。你可以选择只在服务器、客户端或两者中加载数据，并在运行时或构建时加载。

Next.js加载APIS的总结。

服务器端+客户端在运行时：getInitialProps 。
仅在构建时的服务器端：getStaticProps 。
仅在运行时的服务器端getServerSideProps 或React Server Components 。
客户端

为什么有这么多种方法？这让开发者处于驾驶位置。Next.js框架主要以SEO为目标，并声称在服务器中全部加载可能会损害应用程序的性能。

该框架包括流行的功能静态网站生成。它有一些进一步的改进。如果你需要那些SSG页面定期更新，你可以使用getStaticProps 方法中的stale-while-revalidate 策略。这将创建一个具有增量静态再生的网页。你需要一个支持这个功能的CDN。

实践中的ISR实例。

Remix

Remix的愿景是完全不同的。在他们看来，数据应该总是先在服务器端加载。因为它是基于fetch API ，我们可以通过使用Cloud Flare Workers等服务在边缘执行代码。

那是怎么做的呢？在每个根页面上，我们可以定义一个命名的函数loader ，该函数将在服务器中执行，然后通过反应钩API在服务器和客户端提供数据。与这种行为相对应的Next.js是getInitialProps/getServerSideProps 。在Next.js的实现上，虽然你可能会面临很多道具的钻研。

让我们看看一个Remix的工作实例。

这意味着页面布局可以在服务器中完全处理，并平行地发送到客户端。一旦全部下载完毕，用户就不会遇到任何加载旋钮。唯一需要注意的是在同一台服务器上获取数据的时间惩罚。

标题来自remix.run

路由

当涉及到路由时，两个框架都有一些相似之处。它们都依赖于一个基于文件系统的路由系统。当涉及到SSR框架时，它正在成为标准。它使路由页面可预测，并允许一些优化。

它们确实支持嵌套路由和动态路由段。在Next.js中，路由必须放在pages 目录上。

pages/index.js →/
pages/blog/index.js →/blog
pages/blog/first-post.js →/blog/first-post
pages/[username]/settings.js →/:username/settings (/foo/settings)

在Remix中，这些需要放置在app/routes 目录中。

app/routes/blog.js →/blog
app/routes/blog/first-post.js →/blog/first-post
app/routes/invoices/$id/activity.js →/invoices/123/activity

它们的引擎是不同的。Remix框架是建立在React Router之上的，在GitHub上有45k starts 。Remix可以让你创建嵌套式布局。它通过使用React Router v6的Outlet 功能来实现这一点。你可以以一种简洁的方式创建组成的页面，并通过缓存和数据加载节省时间。

你可以选择不使用这种嵌套布局的URL行为。怎么做？只是通过使用. 符号而不是创建文件夹。它将在URL中用一个/ 来交换每个. 。未嵌套的布局是Next.js渲染其路由的方式。

// nested layout: it will render blog.js + new.jsapp/routes/blog/new.js → /blog/new

在我看来，Remix在这一领域占了上风，Next.js还需要努力追赶。

附加功能

Next.js带有大量的功能。他们最近推出了Next.js Live 。它实现了实时协作，这可能会极大地提高团队的生产力。

他们还推出了中间件功能。它使开发人员能够在配置上编写代码。它将JavaScript带到边缘，更接近用户，从而使页面更敏捷。它结合了缓存的好处和动态执行的力量。中间件逻辑可以通过页面将授权等功能与你的组件解耦。

Next.js框架支持将任何React页面变成AMP页面。如果你想创建一个新闻网页，这很有用。

总结

我们已经看到了Next.js和Remix的比较。它们都有惊人的功能，提供了高性能的体验，并有一个伟大的社区。它们都通过闪电般的Rust和Go编译器提供了良好的开发者体验。

但是......在做任何决定之前，请注意Next.js有一定程度的供应商锁定。要想在其最大限度内运行它的所有功能，你需要使用Vercel平台。在另一个供应商那里释放它的全部潜力可能太耗时了。

在有些情况下，选择Next.js是不费吹灰之力的：当你有静态网站或需要使用AMP时。当你需要一个没有JavaScript的响应式网站时，你应该使用Remix。

除此以外，这涉及到个人偏好。目前，我倾向于Remix，因为我喜欢它的简单性和路由。然而，在未来，我们将能够使用React服务器组件等功能。

谢谢你的阅读。如果你喜欢你所读的内容，也可以看看这些相关的文章。