Remix 与 Next.js：详细对比
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
Remix JS 和 Next.js 框架的详细比较
Next.js 是最流行的用于服务器端渲染的 React 框架之一。它已经存在很长时间了，并提供了开发者所需的所有功能，带来了卓越的开发体验。
然而，随着 Remix 开源的推出，开发者们开始思考哪个框架更适合他们的应用程序。因此，在本文中，我将对比 Next.js 和 Remix 的一些重要特性，以帮助您选择最佳框架。
如何使用 Node.js Lambda 和 API 网关将文件上传到 AWS S3（2022 年）
2022 年使用 AWS Amplify 部署 React 应用
- 路由
Remix 和 Next.js 在路由方面有很多相似之处。例如，它们都采用基于文件的路由系统，并且都支持嵌套路由和动态路由段。
就相似之处而言，当你在 /pages 目录中创建一个文件时，它将自动设置为 Next.js 中的路由。
pages/index.js ==> /
pages/users/index.js ==> /users
pages/users/create.js ==> /users/create
Remix 也可以自动创建路由。但是，你需要将文件放在 app/routes 目录中。
至于区别，Remix 路由构建于 React Router 之上，并允许你使用 React Hooks，例如 useParams 和 useNavigate。另一方面，Remix 内置了对嵌套路由和嵌套布局的支持，而 Nest.js 则需要手动配置。
- 数据加载
Web应用程序中有多种数据加载技术，其中包括：
- 运行时服务器端渲染。
- 在构建时进行服务器端渲染。
- 客户端运行时渲染。
- 混合了服务器端运行时、客户端和服务器端构建时间以及客户端运行时。
在 Next.js 中，开发人员可以使用上述所有技术，并结合不同的功能，从页面导出数据。
您可以使用 `getServerSideProps` 在运行时从服务器端加载数据，而 `getStaticProps` 和 `getStaticPath` 则可用于在构建时从服务器端加载数据。以下示例展示了如何使用 `getServerSideProps` 加载数据。
export const getServerSideProps = async ({ params, query }) => {
// get a param from the url const id = params.id // getting data from the url query string const DataLimit = query.DataLimit
return {props: {id, DataLimit}}
};
export default function FirstPage() {
let {id, DataLimit} = useLoaderData();
return (
<div>
<h1>The parameters are: {id}</h1>
<h1>The DataLimit url query is: {DataLimit}</h1>
</div>
);
}
在 Remix 中，只有两种加载数据的方法。您可以使用服务器端运行时加载数据，也可以使用客户端运行时加载数据来渲染数据。
你需要从路由导出加载器函数，以便从服务器端加载数据，并在 Remix 中使用 Fetcher Hook 在客户端加载数据。
import { useLoaderData } from "remix";
export let loader = async ({ params, request }) => {
// get a param from the page url const id = params.id // getting data from the url query string const url = new URL(request.url) const dataLimit = url.searchParams.get("dataLimit")
return {id, dataLimit}
};
export default function FirstPage() {
let {id, dataLimit} = useLoaderData();
return (
<div>
<h1>The parameter is: {id}</h1>
<h1>The limit for url query is: {dataLimit}</h1>
</div>
);
}
Next.js 支持服务器端渲染 (SSR)、静态站点生成 (SSG)、增量站点重生成 (ISR) 和客户端渲染 (CSR)。而 Remix 仅支持 SSR 和 CSR。
- 会话和 Cookie 的使用
Next.js 本身没有内置函数来操作 cookie 或会话。但是像 Cookie.js 这样的常用库可以与 Next.js 或 NextAuth.js 配合使用，以执行用户身份验证并将会话数据保存在 cookie 中。
Remix 内置了对 cookie 和 session 的支持。您可以通过调用函数生成 cookie，然后序列化或解析数据以进行存储或读取。
以下来自 Remix 的代码片段展示了如何在 Remix 中创建一个用于管理浏览器 cookie 的逻辑函数。
import { createCookie } from "remix";
const cookie = createCookie("cookie-name", {
expires: new Date(Date.now() + 60),
httpOnly: true,
maxAge: 60,
path: "/",
sameSite: "lax",
secrets: ["s3cret1"],
secure: true
});
- 部署
任何能够运行 Node.js 的服务器上都可以安装 Next.js，只需运行 `next build && next start` 即可。它内置了对部署到 Vercel 时以无服务器模式运行的支持，Netlify 团队也为其服务编写了一个用于无服务器部署的适配器。
Remix 的设计目标是可在任何平台上运行，并与任何系统交互。因此，Remix 是 HTTP 服务器内部的一个请求处理程序，允许您使用任何服务器。构建 Remix 应用时，系统会询问您希望将其部署到哪里，截至撰写本文时，您有以下选项：
- Remix 应用服务器
- Express Server
- Netlify
- Cloudflare 页面
- 维塞尔
- Fly.io
- 架构师（AWS Lambda）
- 造型
Remix 在样式方面与 Next.js 略有不同。Remix 提供了一种内置技术，可以使用 link 标签链接传统的 CSS 样式表，而 Next.js 则默认使用 Styled-JSX 作为 CSS in JS 解决方案。
Styled-JSX 允许你在 Next.js 应用中使用封装且作用域限定的 CSS 来设置组件样式。你可以<style jsx>在现有的 React 组件中使用 `<style>` 标签，并在其中定义 CSS，如下所示：
function Home() {
return (
<div className="container">
<h1>My Cart in Next.js</h1><p>Some paragraph</p><style jsx>
{'
.container {
margin: 20px;
}
p {
color: blue;
}
`}
</style></div>
)
}
export default Home
Remix 使用简单的方法，通过 `<style>` 标签为页面添加样式<link rel ="stylesheet">。添加样式表链接后，您可以使用 Remix 路由中的 `links` 模块导出布局。以下代码片段展示了如何使用 `links` 函数在 Remix 中加载样式表。
export function links() {
return [{
rel: "stylesheet",
href: "https://test.min.css"
}
];
}
以下示例展示了在渲染 myCart 组件时，标签如何合并每个嵌套路由中的 links 组件。
import { Links } from "remix";
export default function myCart() {
return (
<html><head><Links />
{/* ... */}
</head>
{/* ... */}
</html>
);
}
结论
Remix 通过新的抽象层改善了开发者体验，并通过减少 JavaScript 代码量提升了用户体验。但 Next.js 拥有更庞大的用户群，Vercel 团队也为其开发投入了更多资源。
在实际应用中，Remix 主要用于个人项目和玩具类应用。而 Next.js 则广泛应用于许多生产环境中。
总的来说，Remix 是一个强大的框架，并且在 2022 年会更加普及。但是，在处理生产级应用程序时，使用 Next.js 显然是更好的选择，因为它已经非常成熟，并且拥有社区支持。
希望这篇文章对您有所帮助。感谢阅读！
阅读更多
文章来源：https://dev.to/braincuber_technologies/remix-vs-nextjs-a-detailed-comparison-2ogg