停止运行 Next.js — Remix 是 React 的未来，这就是你错过的原因

React 开发人员面临的悖论

想象一下：您是一名 React 开发人员，在 Next.js 的世界中游刃有余，享受服务器端渲染 (SSR)、静态站点生成 (SSG)、API 路由以及所有随之而来的功能。 Next.js 已成为您值得信赖的伴侣，指导您应对现代 Web 开发的复杂性。

但是，在你的眼角，你看到了Remix。它看起来像是另一个试图加入不断增长的 React 生态系统的框架。但是等等——这是由React Router背后的同一团队创建的。这难道不值得关注吗？

你情不自禁地问自己，“Remix 只是另一个流行词，还是还有什么东西值得我认真考虑？”

让我立即消除这个疑问：Remix 不仅仅是 Next.js 的替代方案 - 它是构建 Web 应用程序的一种新的、更优越的方法。是时候抛开 Next.js 的限制，用 Remix 拥抱下一代 Web 开发了。

在这篇博客中，我将详细解释为什么 Remix 应该成为您的首选框架，为什么开发人员放弃 Next.js，以及为什么这可能是您一直在等待的框架。

没有绒毛。没有炒作。只是事实。 让我们深入探讨。

---

为什么 Remix 胜过 Next.js：性能为王

我们来谈谈大家在选择框架时最想知道的一点：性能。毕竟，您正在为速度至关重要的现实世界构建应用程序 - 对于用户、搜索引擎以及最终您的业务。

1. 数据加载：Remix 的服务器端魔法

在Next.js中，您可以使用getServerSideProps、getStaticProps，甚至getInitialProps来管理数据获取。但事情是这样的：它们都会在数据和组件之间造成脱节。这就像为您的组件和数据拥有一条单独的装配线，迫使它们稍后同步。

输入 Remix 及其 Loaders。加载器模式是天才，因为它将数据获取过程直接与路由联系起来。每个路由的加载器都可以在渲染组件之前获取数据，为您提供更流畅、更高效的加载体验。这种方法消除了不必要的复杂性，并最大限度地减少 JavaScript 执行，使您的应用程序更快。

混音示例：

// app/routes/products.jsx
import { useLoaderData } from "remix";

export function loader() {
  return fetch('/api/products').then(res => res.json());
}

export default function Products() {
  const products = useLoaderData();
  return (
    <div>
      {products.map(product => (
        <div key="{product.id}">{product.name}</div>
      ))}
    </div>
  );
}

在 Next.js 中（实现相同的目的）：

// pages/products.js
export async function getServerSideProps() {
  const res = await fetch('/api/products');
  const products = await res.json();
  return { props: { products } };
}

export default function Products({ products }) {
  return (
    <div>
      {products.map(product => (
        <div key="{product.id}">{product.name}</div>
      ))}
    </div>
  );
}

注意到区别了吗？在 Remix 中，所有内容都整齐地封装在加载器中，使您的组件更简单，样板代码更少。

---

2. 渐进式水合作用：不再有 JavaScript 臃肿

Remix 不会预先加载不必要的 JavaScript，这直接导致更快的加载时间。 Next.js 可能会在页面交互之前使用巨大的 JS 包来填充整个应用程序，但 Remix 可确保仅在客户端加载必要的内容。

这种渐进式水合作用方法确保用户可以几乎立即开始与页面交互，而无需等待整个应用程序加载。想一想：当您的用户准备好时，您的应用程序就准备好了。

---

3. 内置快速渲染优化

Next.js 面临的最大挑战之一是处理客户端水合作用和渲染——尤其是当您拥有包含动态内容的大页面时。 Remix 通过优化从服务器到客户端的渲染流程来消除这一问题，确保更少的重新渲染和更少的数据获取发生在客户端，这会导致页面加载速度更快。

底线？ ​​Remix 页面加载速度更快并且不需要太多繁重的客户端 JavaScript，这会带来更好的性能和搜索引擎优化。

---

开发者体验：自由、灵活性和控制

既然我们已经解决了性能问题，那么我们来谈谈开发者体验。如果您像我一样，您想要的框架不仅仅是“完成工作”，而且让您的生活更轻松，让您能够完成工作而无需与样板代码或无休止的斗争配置.

这就是Remix真正闪耀的地方。

1. 内置嵌套路由和布局：告别道具钻探

Remix 最强大的功能之一是嵌套路线。这意味着您可以直接在路由配置中精细地定义布局和组件，并跨页面共享它们而不会使您的应用程序膨胀

。

Remix 中的路由系统非常直观。它本质上是增强版的React Router。 Remix 不是在页面中嵌套组件并处理道具钻取，而是为您提供嵌套布局

，其中每个页面都是独立但无缝连接的。

2. 直接来自框架的错误边界

Next.js 为您提供错误边界，但 Remix 使它们成为一等公民。不再到处抛出 try-catch 块或编写复杂的错误处理逻辑。借助 Remix，每条路线都会自动包含在错误边界中，这使得处理错误变得干净而简单。

---

现实世界的例子：野外混音

那么，Remix 真的是货真价实的吗？准备好生产了吗？绝对的。

让我们看看一些已经转向Remix的公司：

1. OpenAI（是的，ChatGPT）

OpenAI 将其生产系统迁移到 Remix，以提高性能并减少对客户端渲染的依赖。他们的网站现在加载速度更快，只需向客户端发送最少的 JavaScript，使其快速流畅。

2.Shopify

Shopify 的自定义网络应用程序改用 Remix 来处理需要强大的服务器端渲染和更快的数据获取的大型应用程序。结果呢？应用程序可扩展性、性能和用户体验大幅提升。

---

底线：为什么 Remix 是未来的框架

如果您仍然对 Remix 持观望态度，以下是底线：

• 更快的应用程序：得益于 SSR、渐进式水合作用以及与路线直接相关的数据加载。
• 更干净、更简单的代码：Remix 的结构通过一流的错误边界、嵌套路由和内置加载器降低了复杂性。
• 更好的性能：优化渲染、减少 JavaScript 膨胀和更智能的数据获取。
• 更灵活、更强大的开发者体验：Remix 使您能够完全按照您想要的方式构建，而无需其他框架强加的僵化。

---

那么，为什么坚持使用 Next.js？

Next.js 为我们提供了很好的服务，但时代已经变了。 Remix 提供了一种更干净、更快、更高效的方式来构建现代 React 应用程序。这就像从轿车升级为高性能跑车。当然，轿车可以带您从 A 点到达 B 点，但有了 Remix，您将更快地到达目的地，拥有更多控制力，并且一路上享受更多乐趣。

如果您准备好拥抱未来，请切换到 Remix。以后你会感谢自己的。

立即开始使用 Remix 进行构建，查看他们的官方文档 — 是时候将 Next.js 留在后视镜中了。

---

需要速度吗？ ​​准备好掌控一切了吗？ ​​加入混音革命。

---

以上是停止运行 Next.js — Remix 是 React 的未来，这就是你错过的原因的详细内容。更多信息请关注PHP中文网其他相关文章！