引言

Remix 和 Next.js 都是构建现代 Web 应用的流行框架，但它们有着不同的设计理念。Next.js 因其灵活性和混合渲染模型而被广泛使用，而 Remix 因其性能优化、开发者友好的方法和强调服务器优先渲染而受到关注。本文解释了为什么你可能会选 Remix 而不是 Next.js，重点关注性能、hydration 问题和开发者体验等关键方面。

Remix 和 Next.js 之间的主要区别

1. 性能优化

Remix：

• 服务器优先数据获取：Remix 采用服务器优先的方法设计。它确保数据获取在服务器上发生，成为 HTML 响应的一部分。因此，页面渲染更快，客户端 JavaScript 最小化。
• 向客户端发送最少 JavaScript：Remix 尽量只发送所需的最少交互 JavaScript，确保页面加载更快。大部分繁重的工作在服务器上完成，保持客户端捆绑包小巧。
• 自动预加载：Remix 自动预加载可能接下来访问的链接，确保用户导航体验无缝，减少感知加载时间。

Next.js：

• 多种渲染策略：Next.js 提供 SSG、SSR 和 ISR 方法的灵活性。这种灵活性允许开发者根据应用需求定制渲染策略，但在不同页面优化性能时也增加了复杂性。
• 更多客户端 JavaScript：Next.js 通常向客户端发送更多 JavaScript 以支持客户端渲染（CSR）和重新 hydration 等动态特性。虽然这对某些用例理想，但如果不小心管理，可能会影响性能。

2. 路由

Remix：

• 嵌套路由：Remix 利用嵌套路由，允许开发者在细粒度级别定义路由。这使得对数据获取有更好的控制，允许优化渲染和页面部分重新加载，而无需完整页面刷新。
• 服务器优先渲染：Remix Router 直接集成服务器端数据加载模型，允许高效预加载和渲染。每个路由可以指定自己的数据需求和加载逻辑，避免冗余重新获取数据。

Next.js：

• 基于文件的路由：Next.js 使用简单的基于文件的路由系统，其中 pages 目录中的文件定义路由。虽然易于理解和使用，但这个系统有时可能使得对数据获取的控制不如 Remix 集成的方法精细，特别是对于复杂或嵌套路由。

3. 数据加载和缓存

Remix：

• 声明式数据加载：Remix 使用加载器概念在服务器端获取数据。这确保了页面渲染时已经拥有所有必要的数据，提高了性能并减少了额外客户端获取的需求。

4. Next.js 中的 hydration 问题

在 React（和 Next.js）中，hydration 问题可能特别令人沮丧。这些问题发生在服务器渲染的内容与客户端在 hydration 过程中渲染的内容不同时，导致闪烁、布局偏移或内容不一致。

Next.js 中的常见 hydration 问题：

• 服务器与客户端之间的不匹配：如果 React 组件的状态在服务器端渲染和初始客户端渲染之间不同，React 会抛出 hydration 警告或错误。
• 异步数据获取：在 Next.js 中，如果数据在客户端异步获取（例如，使用 useEffect），但初始 HTML 是用不同数据渲染的，React 会在 hydration 期间检测到这种不匹配，导致内容闪烁或重新渲染等问题。

Remix 如何避免这些问题：

• 服务器端数据获取：Remix 确保在将 HTML 发送到客户端之前，数据已经被获取并包含在初始 HTML 响应中。这消除了服务器渲染 HTML 和客户端 React 之间内容不匹配的可能性。
• 简化 JavaScript 和最小 hydration：Remix 最小化客户端 JavaScript，并确保服务器上的初始渲染尽可能接近客户端渲染，减少 hydration 问题的风险。
• 加载器函数：通过使用加载器函数进行数据获取，Remix 确保在页面最初加载时 HTML 中就存在所需的数据，实现服务器和客户端之间的一致渲染。

5. 开发者体验和灵活性

Remix：

• 现代 Web API 和简洁性：Remix 强调 Web 基础（HTML、CSS、JavaScript）并提供构建 Web 应用的简化方法。框架旨在简单直观，抽象最少，允许开发者专注于构建出色的用户体验。

Next.js：

• 更多选项的灵活性：Next.js 提供广泛的渲染策略和配置，提供更多灵活性。然而，这种灵活性带来了复杂性，要求开发者对他们的应用在不同情况下的行为做出更多决策。

6. 表单处理和操作

Remix：

• 声明式表单处理：Remix 通过使用动作函数直接在服务器上处理表单提交来简化表单处理。这消除了在客户端处理表单提交的需求，使管理服务器端逻辑变得更容易。

Next.js：

• 表单的 API 路由：在 Next.js 中，表单通常使用 API 路由或客户端 JavaScript 提交。虽然这很灵活，但它可能需要更多的样板代码来处理表单，以及额外的逻辑来处理认证、验证和状态管理。

7. 静态站点生成（SSG）和客户端 JavaScript

Remix：

• 优化服务器端渲染：Remix 鼓励最小化客户端 JavaScript 的服务器端渲染。页面在服务器上完全渲染，Remix 确保只向客户端发送必要的 JavaScript。

Next.js：

• 支持静态站点生成（SSG）：Next.js 以其 SSG 和增量静态再生（ISR）而闻名，非常适合构建可以逐步更新的快速静态网站。

何时选择 Remix 而不是 Next.js？

如果性能是首要考虑因素：Remix 的服务器优先渲染模型和优化的数据加载策略可以带来更快的页面加载和更高效的内容交付，减少发送到客户端的 JavaScript 数量。

如果你正在寻找一个更简单、更声明式的框架：Remix 围绕现代 Web 标准设计，并提供直接的开发者体验，抽象最少。对于希望专注于构建出色用户体验而无需管理复杂配置的团队来说，它是一个很好的选择。

如果你想避免 hydration 问题：Remix 的方法最小化了在 React 基础框架（如 Next.js）中常见的 hydration 问题。

如果你需要对服务器端渲染和缓存进行细粒度控制：Remix 提供了对服务器渲染过程、缓存策略和数据获取的更多控制，非常适合需要针对性能和 SEO 优化的应用。

结论

Remix 和 Next.js 都为构建现代 Web 应用提供了强大的解决方案。然而，Remix 在性能、服务器优先渲染和简化数据获取方面的专注可能使其成为某些类型项目更好的选择。如果你重视最少的客户端 JavaScript、减少 hydration 问题和简化的开发者体验，Remix 绝对是你下一个应用值得考虑的选择。

原文地址：https://dev.to/hussain101/remix-vs-nextjs-why-choose-remix-53om