混搭与Next.js的不同之处
在开发者社区，每天都有新的框架和工具出现，这是非常常见的。其中一些提供了一种不同的方法来解决目前正在用其他工具解决的场景。还有一些带来了新的概念或想法，提出了面对项目的不同方式。就像木匠有不同的工具来完成不同的任务一样，开发者也有许多可用的框架和库，适合不同的用例。
让我们来谈谈Remix，这是一个使用服务器端渲染来创建JavaScript项目的（某种）新框架。让我们来看看它的主要功能和概念，并看看它与另一个流行的JavaScript框架的相似之处和不同之处。Next.js。
什么是Remix？
根据其官方网站，Remix是一个边缘优先的全堆栈框架，允许开发人员创建专注于网络标准的优秀用户体验。有了它，你可以使用React和JavaScript创建你的网络应用，用于客户端渲染和服务器端渲染。
由于它建立在Web Fetch API的基础上，用Remix创建的应用程序可以在任何地方运行。Remix使用服务器端渲染来处理数据，并在服务器上渲染HTML内容，向客户端发送尽可能少的JavaScript。
Remix最初是一个基于订阅的高级框架，但在不到一年前，它被作为一个开源框架推出。在这之后，Remix的开发者和用户社区开始成长，并变得更受欢迎。
Remix的主要功能
让我们强调一下Remix所提供的一些主要功能：
-
路由：
与其他框架一样，Remix允许开发者使用包含处理函数的JavaScript/TypeScript文件来管理其网络项目的不同路由。我们能够在网站中生成路由，创建遵循项目文件系统层次结构的文件，为我们的页面创建模拟URL。Remix路由使用React-Router提供的部分路由功能工作。考虑到这种方法，我们可以强调以下好处。 -
嵌套组件：
Remix为您提供了管理嵌套页面和组件的可能性。我们可以创建一个文件来处理某个路由，并在文件系统的同一级别创建一个同名的文件夹。我们在该文件夹中创建的所有文件将是父路由的嵌套组件，而不是不同的页面。 -
错误处理：
嵌套组件带来了另一个好处：如果在渲染某个组件时发生错误，它不会影响页面的其他嵌套部分。因此，我们可以将错误仅仅封装在发生错误的部分，而不是得到一个普通的页面错误。 -
表单：
由于Remix专注于网络标准，它使用本地方法（POST,PUT,DELETE,PATCH）来处理表单，而不是使用JavaScript来处理。 -
加载器和动作：
Remix提供两种不同类型的函数来创建服务器端的动态内容。loader函数用于处理服务器中的GETHTTP请求，主要用于从不同来源获取数据。action函数监控POST、PUT、DELETE、PATCH请求，主要是对数据进行操作和修改。
现在，我们谈到了Remix的一些主要功能，让我们把它与现今最流行和最常用的React框架之一进行比较。Next.js。
跳转后更多在下面继续阅读 ↓
Remix和Next.js之间有什么区别？
如果我们快速浏览一下，Next.js和Remix可能看起来像是在遵循同样的目标--而且，可能是这样。但是，如果我们分析它们提供的功能和方法，我们会发现相似之处和不同之处，我们可以考虑用其中一个框架比另一个框架更适合的方式来解决的场景。
基于React
这两个框架都是在React的基础上创建的，但Remix试图将自己与React脱钩。我们可以看到，Remix提供了更高的抽象层次。另外，不同的Remix社区成员一直在使用其他框架进行不同的实现，如Vue.js、Angular和Svelte。Next.js依赖于React，目前还没有计划改变这一点。
服务器端渲染
除了我们上面提到的功能，我们可以看到Remix和Next.js都提供了服务器端渲染（SSR），在将页面发送到客户端之前，从Web服务器上生成标记和内容。
Next.js和Remix都使用React，所以它们可以依赖客户端水化等功能。另一方面，这两个框架也支持从服务器上预渲染HTML。根据我们正在进行的项目，我们可能希望尽可能多地在服务器端生成内容，避免发送JavaScript代码，并从客户端获取数据。
静态网站生成
另一方面，Next.js提供了在构建时使用静态网站生成（SSG）预先生成静态页面和内容的可能性，而Remix却没有。根据我们想要创建的页面类型，这个功能可以提供很大的好处。有了SSG，我们可以在构建时获取数据并渲染页面，在用户访问我们的网站之前就拥有静态页面，而无需等待内容生成。
但SSG也可能成为问题：每当我们对应用程序的代码或内容进行修改时，我们需要等待构建过程来生成新版本的静态资产。这可能会成为一个痛点，因为如果我们的项目变得越来越大，构建时间会增加。为了处理这个问题，Next.js团队开发了一个叫做增量静态再生（ISR）的功能，以及全新的按需ISR。
陈旧的同时重新验证
为了尽可能快地提供内容，Remix依赖于Stale-while-revalidate缓存指令（SWR）。它不是预先生成静态内容，而是在应用获得流量时为缓存提供动力。页面和文件从缓存中提供，而它们在后台为下一个访问者重新验证。
Next.js还提供了使用stale-while-revalidate的可能性。在getServerSideProps函数里面，你可以使用stale-while-revalidate缓存控制头。
客户端导航
Next.js为用户提供流畅的导航所使用的功能之一是预取。我们可以使用<Link> 组件，使我们的网站在元素出现在视口时预先加载<link> 重定向到的页面。如果我们访问一个网站的主页，看到页面上有一个 "联系 "链接，Next.js将下载并获取与联系页面相关的内容。因此，当我们点击该链接时，我们不必等待页面被下载。
但是有一个限制。Link 组件只为使用静态网站生成（SSG）预先建立的页面提供预取功能。如果我们有动态生成的页面的链接，该功能就不会被触发。
Remix使用HTML<link rel="prefetch"> 标签（而不是像Next.jsLink 组件那样的缓存），因此我们不仅可以预取链接，实际上还可以预取任何页面。如果我们想用Next.js实现类似的功能，可以使用next/head组件，并添加prefetch标签。
边缘优先
当我们从服务器上获取数据和渲染内容时，我们还必须评估执行代码的服务器离发送HTTP请求的用户有多远。如果我的主服务器位于巴西，而用户从中国访问我的网站，如果我从阿根廷访问同样的页面，页面加载过程会比我的慢。这与HTTP请求到评估它和执行代码的较近的服务器的地理距离有关。
即使现代应用程序依靠CDN来提供静态内容，但处理生成动态内容的服务器端代码通常是在数据中心执行的，在一个特定的位置运行。这种情况的变通方法是使用SWR缓存指令，但需要注意的是，在CDN刷新资源的时候，最终要提供陈旧的内容。
考虑到这个问题，在过去几年中，一个新的概念被提出来了。边缘计算。其理念是遵循CDN使用的相同方法，将服务器逻辑复制到不同的服务器和地点，尽可能在离用户更近的地方执行动态代码。虽然Remix被定义为 "边缘优先"，意味着该框架从一开始就被认为是在边缘上运行的，但Vercel将边缘功能作为部署在该平台上的应用程序的附加功能推出。
服务器端代码
在描述Remix的主要功能时，我们说该框架使用本地HTTP方法，在action 和loader 函数的帮助下管理表单。一个表单，一个服务器，一个将表单的序列化数据传输到服务器的POST 请求，一个服务器端的动作，一个作为我们请求结果的新页面。回到网络标准。
Remix提供了<Form> 元素，这是HTML表单的优化版本。有了它和action 函数，我们可以把与我们的路由有关的客户端代码和服务器代码完全放在同一个文件中。Remix知道如何管理我们页面的用户界面和附加在请求上的服务器端行为。没有上下文，没有状态管理。
另一方面，Next.js依靠JavaScript代码知道如何管理应用程序的状态，哪些API被调用，重新验证数据和更新网页的界面。使用API路由，我们可以有单独的文件来执行服务器端的功能，并将数据返回给我们的前端。
正如我们所说的，也正如你所看到的，Remix有一种试图返璞归真的数据变异方式，让人回想起PHP大行其道的那些日子。
Node.js依赖性
正如我们之前所说，Remix是基于Web Fetch API的，而不是依赖于Node.js。这使我们不仅可以在Node.js服务器（如Vercel或Netlify）上运行Remix应用程序，还可以在其他类型的平台（如Cloudflare Workers或新的Deno Deploy）上运行。
有了Next.js的最新版本12.2，你现在可以为整个Next.js项目选择Edge Runtime，而不是使用默认的Node.js运行时。
总结
Remix成为开源项目的时间并不长，但它已经有一个非常活跃的社区在合作，并按照网络标准创建项目。该框架有一个很好的未来。让我们看看它是如何发展的，增加哪些功能，创建哪些相关项目来改善开发者的体验，以及它试图解决哪些其他情况。
