Remix与Next.js

在 Remix 或 Next.js 之间进行选择是开发人员之间无休止的争论。在深入比较之前，让我们快速浏览一下以下主题：

1. 什么是 SSR？

2. 为什么选择 SSR？

3. Next.js

4. Remix

1.什么是SSR？

SSR（服务器端渲染）是指使用服务器从 JS 模块创建 HTML 以响应 URL 请求。而客户端渲染使用浏览器使用 DOM 创建 HTML。

2. 为什么选择 SSR？

SSR 有助于以下方面：

• 搜索引擎优化性能

• 快速初始页面访问

• 支持互联网连接速度较慢的最佳用户

• 提供更好的 SMO（社交媒体优化）

3.Next.js

Next.js是一个开源框架，旨在与 React 一起使用，由 Vercel 创建。

为什么选择 Next.js？

Next.js 有助于以下方面：

• 自动代码拆分以加快页面加载速度
• 基于文件夹的路由
• 预渲染、静态生成 (SSG) 和服务器端渲染 (SSR)
• API 路由。
• 支持 JS 库中的 CSS、内置 CSS 和 SASS 支持。

4. Remix

Remix是一个旨在与 React 一起使用的开源框架。

为什么要Remix？

Remix有助于以下方面：

• Remix 在提供静态和动态内容方面比 Next.js 更快
• Remix 有一个基于组件的错误边界来处理错误和中断
• Remix 支持传统形式
• Remix 处理转换，它可以处理所有加载状态以及加载时显示的内容
• Remix 支持 react-router v6

酷😎对吗？让我们深入比较！

路由

Next.js

它有自己的使用文件系统的路由器。您在 pages 目录中命名的所有文件夹（根目录下的单个父级）成为单独的路由，文件夹内的文件将是它们的子级，依此类推

→pages/index.tsx

/product→pages/product/index.tsx其他pages/product.tsx

/product/:id → pages/product/[id].tsx

Remix

与 Next.js 类似，它遵循相同的基于文件夹的路由结构。路由目录中的所有文件在此处成为单独的路由，依此类推。但它react-router v6用作页面路由的路由器。

在最新版本的 react-router 中，有这个新功能<Outlet/>在嵌套路由中派上用场。使用Outletfrom React Router Dom，您可以构建嵌套路由的层次结构。

Remix 相对于 Next.js 路由器的优势在于它支持嵌套布局和嵌套路由。在 Next JS 中，您需要添加嵌套布局，您需要手动在每个页面上呈现布局，并_app使用自定义逻辑从文件中添加它。

→app/routes/index.tsx

/product→app/routes/product/index.tsx否则app/routes/product.tsx，或者您可以同时拥有这两者并product.tsx作为父包装布局组件。

例如，

app/routes/product.tsx
import { Outlet } from "remix";

export default function ProductsRoute() {
  return (
    <div>
      <h1>Products Wrapper</h1>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

以下内容ProductIndexRoute代替了 outlet in product.tsx：

app/routes/product/index.tsx
export default function ProductIndexRoute() {
  return (
    <div>
      <p>Displaying Product:</p>
      <p>
          Apple
      </p>
    </div>
  );
}

您甚至可以像收养的孩子一样拥有档案app/routes/product.help.tsx。

它不会继承父级的行为，即使它在产品父级的路由下。它没有上图中的父包装器。

/product/:id → app/routes/product/$id.tsx

里面的另一个文件夹routes/pages。在 Remix 中，不导出组件的文件被视为 API 文件（资源路由）。

现在，根据pages/API同名文件的文件名，将下面的文件视为 API.tsx文件

式样

Next.js

Next.js 还支持CSS Modules开箱即用，JS 库中的任何其他框架或 CSS 都可以通过一些配置或插件添加。

Remix

在 Remix 中，所有样式都必须使用Link Function. 通过使用Link，您可以加载CSS files特定文件所需的内容，以避免与其他文件发生 CSS 冲突。

File Scope基于 CSS的种类：

import type { LinksFunction } from "remix";
import stylesUrl from "../styles/index.css";

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: stylesUrl }];
};

export default function IndexRoute() {
  return <div>Hello Index Route</div>;
}

您可以为所有设备尺寸编写单独的媒体查询 CSS，并可以使用链接功能链接到所需的.tsx/.jsx文件：

• app/styles/global.css

• app/styles/global-large.css

• app/styles/global-medium.css

为了使用 CSS 库，需要一个编译器插件。它将无法使用，因为无法更改编译器配置。

您可以找到以下示例：

Remix | Jokes App

数据处理

两者都提供了几种加载数据的方法。

Next.js

Next.js 支持CSR, SSR, 和SSG获取数据。它具有以下功能：

• getServerSideProps,
• getStaticProps,
• getInitialProps,
• getStaticPaths.

export const getServerSideProps = async ({ params }) => {
   const {id} = params
   const res = await fetch(
    `https://anyapi.com/products/${id}`
  );
  const data = await res.json();
   return {props: {id, data}}
};

export default function Home({id, data}) {
  return (
    <div>
       <span>The params is: {id}</span>
      <span>The data is: {data}</span>
    </div>
  );
}

Remix

Remix 仅支持SSR和CSR。它具有以下功能：

• loader,
• useFetcher.

import { useLoaderData } from "remix";

export let loader = async ({ params }) => {
   const {id} = params
   const res = await fetch(
    `https://anyapi.com/products/${id}`
  );
  const data = await res.json();
   return {id,data}
};

export default function Home() {
  let {id, data} = useLoaderData();
  return (
    <div>
      <span>The params is: {id}</span>
      <span>The data is: {data}</span>
    </div>
  );
}

API 处理

Next.js

Next.js 没有任何内置函数来处理 cookie 和会话。

Remix

Remix 带有 cookie 和会话处理功能，它使您可以完全控制 API 的请求和响应。

Cookies

import { createCookie } from "remix";

export const userPrefs = createCookie("user-prefs", {
  maxAge: 604_800 // one week
});

Sessions

import { createCookieSessionStorage } from "remix";

const { getSession, commitSession, destroySession } =
  createCookieSessionStorage({
    // a Cookie from `createCookie` or the CookieOptions to create one
    cookie: {
      name: "__session",

      // all of these are optional
      domain: "remix.run",
      expires: new Date(Date.now() + 60),
      httpOnly: true,
      maxAge: 60,
      path: "/",
      sameSite: "lax",
      secrets: ["s3cret1"],
      secure: true
    }
  });

export { getSession, commitSession, destroySession };

错误处理

Next.js让您有单独的屏幕进行error 404渲染500。

Remix使用错误边界来处理文件内的路由。如果子组件中有错误，它不会影响父组件。

处理 JavaScript

Next.js对在所需页面上禁用运行时 JS 没有适当的支持。

Remix允许用户在他们的路由中启用或禁用运行时 JavaScript。在静态页面上禁用 JS 并启用它是有帮助的。

重新加载

Next.js具有反应快速刷新以重新加载屏幕而不会丢失状态。

Remix有需要启用的实时重新加载。

📢 Remix 还有其他功能，例如

1.表单处理架构

Remix 使用 HTML元素，而不是创建一个添加onSubmit函数和调用 API 服务的表单选项卡。form默认情况下，它带有服务器的概念。它还包括 PHP 风格的、服务器端的GET和POST句柄。从这个意义上说，Remix 表单无需任何 JavaScript 函数即可运行。用户甚至可以关闭 JS，他们仍然可以使用该网站。

在 Next.js 中：

const onSubmit=() =>{//api handle}
<form onSubmit={onSubmit}>
  <label><input name="name" type="text" /></label>
  <label><textarea name="description"></textarea></label
</form>

在Remix中：

<form method="get" action="/search">
  <label>Search <input name="term" type="text" /></label>
  <button type="submit">Search</button>
</form>

<form method="post" action="/projects">
  <label><input name="name" type="text" /></label>
  <label><textarea name="description"></textarea></label>
  <button type="submit">Submit</button>
</form>

参考

Data Writes

2.部署

Remix 旨在支持许多平台。它有一个request handler内部的 HTTP 服务器，可以帮助您使用任何服务器。在构建 Remix 应用程序时，系统会询问您要将其部署在哪里，您将获得以下选项：

• 混音应用服务器
• 快递服务器
• 网络化
• AWS 拉姆达
• Cloudflare 页面
• 韦尔塞尔

Remix或 Next.js

Remix已经添加了许多改进，以通过他们的新想法、抽象和用户体验来支持开发人员体验，并通过交付最少的 JavaScript。它是 Web 开发世界中的一个新框架。它还有更多功能，并且也有大量的社区支持。

better rendering speed与 Next.js 相比，它在静态和动态页面上都有。

Remix 相对于 Next.js 路由器的优势在于它支持嵌套布局和嵌套路由。在 Next.js 中，您需要添加嵌套布局。您需要手动渲染每个页面上的布局，并_app使用自定义逻辑从文件中添加它。

Remix 允许拥有一个adopted child app/routes/filename.help.tsx 类似于app/routes/filename.tsx. 它不会继承父级的行为，即使它在父级路由下。

Next JS开发时间明显更长，拥有更大的用户社区，并且拥有更多来自Vercel. 它正在大量生产应用程序中使用。

📢电商网站渲染对比

我们来看看 Remix 对 Next JS 的看法

• 在提供静态内容方面，Remix 与 Next.js 一样快或更快
• 在提供动态内容方面，Remix 比 Next.js 更快
• 即使在慢速网络上，Remix 也能实现快速的用户体验
• Remix 自动处理错误、中断和竞争条件，Next.js 不会
• Next.js 鼓励客户端 JavaScript 提供动态内容，Remix 不鼓励
• Next.js 需要客户端 JavaScript 来进行数据突变，而 Remix 不需要
• Next.js 构建时间随着您的数据线性增加，Remix 构建时间几乎是即时的并且与数据解耦
• Next.js 要求您在数据扩展时更改应用程序架构并牺牲性能
• 我们认为 Remix 的抽象可以带来更好的应用程序代码

其他参考：Remix vs Next.js

主要差异

功能	混音	下一个
表单处理	✅	❌
反应路由器 V6	✅	❌
SSG	❌	✅
Cookie 和会话处理	✅	❌
默认错误处理	✅	❌
特定文件的条件 Js 捆绑	✅	❌

文章来源：https://techblog.geekyants.com/remix-vs-nextjs