Remix框架是Web开发的未来吗？

javascript保持其作为最常用编程语言之一的统治地位。由于这个事实，这种编程语言也有许多库和框架。react是最流行的javascript库之一。

react还配备了许多专为执行不同功能而设计的框架和库。web框架提供了一种创建web应用程序的结构化方式。框架提供可重用的代码，开发人员可以在其应用程序中使用，而不是从头开始创建所有内容。

remix是一种最新的react web框架，最近受到了很多关注。本文将定义什么是remix框架，其特点，如何设置它，remix的用例以及其限制。

什么是remix框架？

remix是建立在react之上的全栈web开发框架。您可以使用remix应用程序创建应用程序的后端和前端。remix允许您专注于ui，并帮助您提供弹性和快速的用户体验。

这个框架可以描述为四个方面的东西：编译器，浏览器框架，服务器框架和http处理程序。

remix最初是一项付费服务，但于2021年末开源。它还在2022年被shopify收购。

remix框架特点

• remix stacks：这个remix cli功能可以快速生成remix应用程序。其中一些堆栈是内置的。您还可以自己从头开始创建应用程序。官方内置的堆栈具有自动部署流水线、数据库、测试、身份验证和linting等功能。其中一些堆栈是流行的蓝调堆栈、独立堆栈和垃圾堆栈。
• 服务器端渲染（ssr）：这个框架可以实现react组件的服务器端渲染。remix上的初始渲染发生在服务器上，将完全渲染的html文档发送给客户端。服务器端渲染有多个好处，例如改善可访问性、允许搜索引擎抓取内容和改善速度。
• 嵌套路由：remix使用react router 6。使用这个框架，您只需将文件放入路由文件夹中，remix的路由模块将其转换为可导航的路径。嵌套路由是包含在另一个路由内的路由。
• 支持typescript和javascript：无论您使用javascript还是typescript，都可以使用remix。使用typescript的优点在于它允许您声明变量，并且易于早期发现错误。
• 内置数据加载和缓存：这个框架允许开发人员定义从各种源获取数据的加载器。remix在客户端和服务器端处理数据获取。这个框架提供的缓存机制使减少不必要的数据获取和优化后续请求变得轻而易举。
• 代码分割和预取：您可以将remix应用中的代码拆分为小的可按需加载的部分。这种方法减少了初始捆绑包大小，并具有预取能力，可以在后台加载数据和代码。

remix框架的好处

• 全栈：大多数人使用不同的语言或框架来创建他们应用的客户端和服务器端。例如，您可以在前端使用react，在后端使用像expressjs这样的node.js框架。在其他情况下，您可以在后端使用像django这样的python框架。remix是一个全栈框架，这意味着您的前端和后端将在同一个应用程序上。
• 出色的数据处理：remix依赖于浏览器的本地功能和约定。卓越的数据流使得在应用程序的前端和后端之间传输数据变得很容易。
• 简易状态处理：在react应用程序中管理状态可能是一件麻烦的事情，大多数开发人员使用第三方库如redux。remix使用加载器来在服务器端管理状态。您可以从当前路由中的任何组件使用'useloaderdata'属性。
• 错误边界：如果在remix应用程序的嵌套路由或组件中出现错误，这些错误将仅限于该组件。这样的错误不会像其他框架那样破坏整个应用程序。尽管您可以在某些react框架（如next.js）中实现错误边界功能，但这个功能在remix中是内建的。

设置remix的前提条件

如果您想设置一个remix应用程序，您需要一些东西：

• node.js版本必须是14.17.0或更高
• 一个像npm（7或更高版本）的包管理器
• 一个代码编辑器
• 对react应用程序的工作原理有一定的了解

如何在remix上设置“hello, world!”

我们将创建一个简单的项目，并将其命名为“remix-app”。您可以按照以下步骤进行操作：

• 导航到您想要创建应用程序的位置，打开终端并运行以下命令：

npx create-remix@latest remix-app

终端会提示您回答几个问题并设置应用程序。我们可以使用基本设置，并选择typescript作为我们的语言。

• 导航到创建的应用程序（remix-app）并打开它，文件夹结构如下：

• 使用以下命令构建应用程序：

npm run build

• 使用以下命令启动开发服务器：

npm start

您现在可以使用http://localhost:3000链接在浏览器中打开窗口，浏览器中将显示以下内容：

• 使用以下内容修改app/root.tsx文件：

import { livereload } from "@remix-run/react";

export default function app() {

  return (

    

      

        

        

        

      

      

        hello world

        

      

    

  );

}

渲染的页面将如下所示：

remix框架的使用场景

就像next.js和react一样，remix可以用来构建不同类型的应用程序。以下是一些最好的使用案例：

• 单页面应用程序：remix应用程序中的所有代码只会加载一次。服务器端渲染的方法可以快速加载初始内容，而客户端可以无缝处理后续请求。
• 友好的seo网站：remix使用预渲染功能生成静态html页面。这使得即使处理动态内容，也可以对网站进行索引。
• 动态网站：remix在其应用程序中使用服务器端渲染。在将html页面发送给客户端之前，ssr在服务器上加载页面。因此，remix非常适合内容动态生成的网站。

remix框架在服务器端和客户端上的工作原理

服务器端渲染

remix在服务器端以纯html形式渲染您的代码。这种方法减少了javascript的数量，从而提高了加载速度。remix基本上使用原生的'action'和'loader'函数。服务器将执行您提供的任何服务器端操作，将react代码渲染为纯html，然后将其发送到客户端浏览器。

客户端渲染

remix和next.js一样，提供了“预获取”功能，为用户提供平稳的导航。

在next.js中， 组件允许我们预加载一个页面，该页面由重定向，而无需等待页面下载。但是，这种方法只适用于静态网站。

remix使用​功能，可以轻松获取和其他任何页面。因此，remix可以快速加载根据用户输入而变化的页面内容。

remix的限制

• 社区较小：remix最初是一款付费框架。然而，在2021年成为开源项目，仍然很年轻。这意味着资源和工具有限，无法轻松创建应用程序。
• 学习曲线较陡：remix引入了嵌套路由的概念，如果您来自react或next.js等框架，可能会感到困惑。然而，一旦掌握了要领，使用该框架变得容易。

remix的未来如何？

• 可能会看到增加的采用：remix还很年轻。开发人员可能还没有发现它的潜力，我们可能会在未来看到更多的公司和开发人员使用它。
• 生态系统可能会增长：remix目前仍然缺少支持其生态系统的工具和库。随着其采用率的增长，我们可以期待更多的工具和库。
• 社区将会增长：社区对于框架/编程语言的发展至关重要。我们预计随着开发人员发现remix的优点，社区将会增长。

remix比next.js更好吗？

对于这个问题的答案将取决于您创建的应用程序的性质。如果您想使用一个框架构建全栈应用程序，remix将比next.js更好。然而，如果您想要一个资源丰富、拥有良好追随者的成熟框架，next.js将是您的完美选择。

remix是一个好的框架吗？

是的。使用一个框架来构建整个全栈应用是一个很好的选择。如果你想使用内置的错误边界功能的技术，remix也是一个很棒的框架。然而，如果你想要一个拥有庞大社区和丰富资源的框架，remix可能不是合适的选择。

remix js是否可以用于生产环境？

是的。如果你熟悉部署node.js应用程序，使用和部署remix应用程序也将非常容易。

我应该学习remix还是react？

remix是一个基于react的框架。因此，在开始学习remix之前，你需要了解react的工作原理。然而，如果你的时间有限，只想学习一个框架，选择将取决于你的最终目标。

remix允许你构建全栈应用程序。即使你不完全理解react，你也可以学习remix，但学习曲线会较陡。然而，如果你使用react，如果你想要一个全栈应用程序，你必须使用像django或ruby on rails这样的后端框架。如果你决定学习react，你可以依靠其丰富的资源和社区。

结论

现在判断remix是否是web开发的未来还为时过早。它令人惊叹的特性，如灵活的路由、服务器端渲染、代码拆分和专注于开发者体验，使其成为一个非常有前途的web框架。

然而，remix还很年轻，它的资源仍然有限。它的社区也很小。remix js框架的工具和库很少，因为大多数开源框架依赖于社区支持和第三方工具。

你还可以探索一些框架和库作为全栈开发者的选择。