网站建设Remix 和 Next.js 的区别
最近我们在谈论使用Remix建设网站，这是一个使用服务器端渲染创建 JavaScript 项目的框架。让我们来看看它的主要特性和概念，看看它与 Next.js 的异同。Remix 不久前成为开源的，它有一个充满希望的未来。让我们看看它是如何演变的，添加了哪些功能，创建了哪些相关项目以改善开发人员体验，以及它试图解决哪些其他场景。
根据其官方网站，Remix 是一个边缘优先的全栈框架，它允许开发人员创建专注于 Web 标准的出色用户体验。有了它，您可以使用 React 和 JavaScript 创建您的 Web 应用程序，用于客户端渲染和服务器端渲染。
由于它是基于 Web Fetch API 构建的，因此使用 Remix 创建的应用程序可以在任何地方运行。Remix 使用服务器端渲染来操作数据并在服务器中渲染 HTML 内容，从而向客户端发送尽可能少的 JavaScript。Remix 最初是一个基于订阅的高级框架，但不到一年前，它作为一个开源框架推出。在此之后，Remix 开发者和用户的社区开始发展壮大并越来越受欢迎。
让我们重点介绍 Remix 提供的一些主要功能：
1、与其他框架一样，Remix 允许开发人员使用包含处理函数的 JavaScript/TypeScript 文件来管理其 Web 项目的不同路由。我们能够在我们的网站中生成路由，创建遵循我们项目的文件系统层次结构的文件，为我们的页面创建模拟 URL。Remix 路由使用React-Router提供的部分路由功能工作。考虑到这种方法，我们可以强调以下好处。
2、Remix 让您可以管理嵌套页面和组件。我们可以创建一个文件来处理某个路由，并在文件系统的同一级别创建一个同名文件夹。我们在该文件夹中创建的所有文件都将是父路由的嵌套组件，而不是不同的页面。
3、嵌套组件带来了另一个好处：如果在渲染某个组件时发生错误，它不会影响页面的其他嵌套部分。因此，我们可以将错误封装在它发生的部分中，而不是得到一般的页面错误。
4、由于 Remix 专注于 Web 标准，它使用本机方法 ( POST, PUT, DELETE, PATCH) 来处理表单，而不是使用 JavaScript。
5、Remix 提供了两种不同类型的函数来创建服务器端动态内容。该loader函数用于处理GET服务器中的 https 请求，主要用于从不同来源获取数据。action函数 monitor 、POST、PUT和requests 专注于数据操作和修改DELETE。PATCH。
如果我们快速浏览一下，Next.js 和 Remix 似乎都在追求相同的目标——而且很可能确实如此。但是，如果我们分析它们提供的功能和方法，我们将找出相似之处和不同之处，并且我们可以考虑使用其中一个框架以比另一个框架更合适的方式解决场景。这两个框架都是在 React 之上创建的，但 Remix 试图将自己与它解耦。我们可以看到 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 团队开发了一个名为Incremental Static Regeneration (ISR) 的功能，以及全新的On-Demand ISR。
根据其官方网站，Remix 是一个边缘优先的全栈框架，它允许开发人员创建专注于 Web 标准的出色用户体验。有了它，您可以使用 React 和 JavaScript 创建您的 Web 应用程序，用于客户端渲染和服务器端渲染。
由于它是基于 Web Fetch API 构建的，因此使用 Remix 创建的应用程序可以在任何地方运行。Remix 使用服务器端渲染来操作数据并在服务器中渲染 HTML 内容，从而向客户端发送尽可能少的 JavaScript。Remix 最初是一个基于订阅的高级框架，但不到一年前，它作为一个开源框架推出。在此之后，Remix 开发者和用户的社区开始发展壮大并越来越受欢迎。
让我们重点介绍 Remix 提供的一些主要功能：
1、与其他框架一样，Remix 允许开发人员使用包含处理函数的 JavaScript/TypeScript 文件来管理其 Web 项目的不同路由。我们能够在我们的网站中生成路由，创建遵循我们项目的文件系统层次结构的文件，为我们的页面创建模拟 URL。Remix 路由使用React-Router提供的部分路由功能工作。考虑到这种方法，我们可以强调以下好处。
2、Remix 让您可以管理嵌套页面和组件。我们可以创建一个文件来处理某个路由，并在文件系统的同一级别创建一个同名文件夹。我们在该文件夹中创建的所有文件都将是父路由的嵌套组件，而不是不同的页面。
3、嵌套组件带来了另一个好处：如果在渲染某个组件时发生错误，它不会影响页面的其他嵌套部分。因此，我们可以将错误封装在它发生的部分中，而不是得到一般的页面错误。
4、由于 Remix 专注于 Web 标准，它使用本机方法 ( POST, PUT, DELETE, PATCH) 来处理表单，而不是使用 JavaScript。
5、Remix 提供了两种不同类型的函数来创建服务器端动态内容。该loader函数用于处理GET服务器中的 https 请求，主要用于从不同来源获取数据。action函数 monitor 、POST、PUT和requests 专注于数据操作和修改DELETE。PATCH。
如果我们快速浏览一下，Next.js 和 Remix 似乎都在追求相同的目标——而且很可能确实如此。但是，如果我们分析它们提供的功能和方法，我们将找出相似之处和不同之处，并且我们可以考虑使用其中一个框架以比另一个框架更合适的方式解决场景。这两个框架都是在 React 之上创建的，但 Remix 试图将自己与它解耦。我们可以看到 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 团队开发了一个名为Incremental Static Regeneration (ISR) 的功能，以及全新的On-Demand ISR。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
