Remix与Next.js

作者: 小城哇哇 | 来源:发表于2022-09-20 11:02 被阅读0次

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

什么是 SSR？
为什么选择 SSR？
Next.js
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

Remix与Next.js

1.什么是SSR？

2. 为什么选择 SSR？

3.Next.js

为什么选择 Next.js？

4. Remix

为什么要Remix？

路由

Next.js

Remix

式样

Next.js

Remix

数据处理

Next.js

Remix

API 处理

Next.js

Remix

Cookies

Sessions

错误处理

处理 JavaScript

重新加载

1.表单处理架构

参考

2.部署

Remix或 Next.js

主要差异

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读