- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Next.js 强劲对手来了! Remix 正式宣布开源由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
大家好,我是皮汤。周五翻 Github 趋势榜看到了 Remix 这个内容,觉得挺有发展前景的,初步了解了一下具体的特性,分享给大家.
近期,由 React Router 原班团队打造,基于 TypeScript 与 React,内建 React Router V6 特性的全栈 Web 框架 Remix 正式开源。目前占据 Github 趋势总榜前 3,Github 标星 5K+ Star:
Remix 开源之后可以说是在 React 全栈框架领域激起千层浪,绝对可以算是 Next.js 的强劲对手。Remix 的特性如下:
特性这么多?不明觉厉!接下来我们就尝试一一来展示这些 Remix 的特性.
Remix 提供基于文件的路由,将读取数据、操作数据和渲染数据的逻辑都写在同一个路由文件里,方便一致性处理,这样可以跨客户端和服务端逻辑共享同一套类型定义.
看一段官网的代码:
上述是一个路由文件,如果它是 src/routes/posts/index.tsx 文件,那么我们开启服务器,通过 localhost:3000/posts 就可以访问到这个文件,这就是文件即路由,而默认导出的 Projects 函数,即为一个 React 函数式组件,此函数的返回模板则为访问这个路由的 HTML 文档.
值得注意的是,action 函数是在 <Form method="post"> 表单里,用户点击提交按钮之后自动调用,Remix 通过 Fetch API 的形式去调用,然后在前端不断的轮询获取调用结果,且自动处理用户多次点击时的竞争情况.
上述代码渲染的页面如下:
整个 App 网站是由 <Document> 嵌套 <Layout> 组成,其中 <Outlet> 是路由的填充处,即上图中绿色的部分。当我们访问 localhost:3000/ 时,其中填充的内容为 src/routes/index.tsx 路由文件对应的渲染内容,而当我们访问 localhost:3000/admin 时,对应的是 src/routes/admin.tsx 路由文件对应的渲染内容.
而我们在 的 src/routes/admin.tsx 继续提供了 <Outlet> 路由显然组件,意味着当我们继续添加分级(嵌套)路由时,如访问 http://localhost:3000/admin/new 那么这个 <Outlet> 会渲染 src/routes/admin/new.tsx 对应路由文件的渲染内容,而访问 http://localhost:3000/admin 时,<Outlet> 部分会渲染 src/routes/admin/index.tsx 对应路由文件的渲染内容,见下图:
而这种嵌套路由是自动发生的,当你创建了一个 src/routes/admin.tsx 之后,又创建了一个同名的文件夹,并在文件夹下建立了其它文件,那么这些文件的文件名会被注册为下一级的嵌套路由名:
通过这种文件即路由,同名文件夹下文件即嵌套路由的方式,然后通过在父页面里面通过 的方式渲染根据子路由渲染子页面内容,极大的增加了灵活性,且每个子路由对应独立的路由文件,具有独立的数据处理逻辑、内容渲染逻辑、错误处理逻辑.
上述嵌套路由一个显而易见的优点就是,某个部分如果报错了,结合后续会提到的 ErrorBoundary 和 CatchBoundary 这个部分可以显示错误的页面,而用户仍然可以操作其他部分,而不需要刷新整个页面以重新加载使用,极大提高网站容错性.
通过嵌套路由,Remix 可以干掉几乎所有的加载状态、骨架屏,现在很多应用都是在前端组件里进行数据获取,获取前置数据之后,然后用前置数据去获取后置的数据,形成了一个瀑布式的获取形式,当数据量大的时候,页面加载就需要很长时间,所以绝大部分网站都会放一个加载的状态,如小菊花转圈圈,或者体验更好一点的骨架屏,如下:
这是因为这些应用缺乏类似 Remix 这样的嵌套路由的概念,访问某个路由时,就是访问这个路由对应的页面,只有这个页面加载出来之后,里面的子组件渲染时,再进行数据的获取,再加载子组件,如此往复,就呈现瀑布流式的加载,带来了很多中间的加载状态.
而 Remix 提供了嵌套路由,当访问路由 localhost:3000/admin/new 时,会加载三级路由,同时这三个路由对应的页面独立、并行加载,独立、并行获取数据,最后发送给客户端的是一个完整的 HTML 文档,如下过程:
可见虽然我们首屏拿到内容可能会慢一点,但是再也不需要加载状态,再见,菊花图,再见,骨架屏.
同时借助嵌套路由,当我们鼠标 Hover 到某个链接准备点击切换某个子路由时,Remix 提供了预获取(Prefetch)功能,可以提前并行获取子路由文档和各种资源,包括 CSS、图片、相关数据等,这样当我们实际点击这个链接切换子路由时,页面可以立即呈现出来:
我们的网站经常会遇到问题,使用其他框架编写时,网站遇到问题可能用户就需要重新刷新网站,而对于 Remix 来说,基于嵌套路由的理念,则无需重新刷新,只需要在对应的错误的子路由展示错误信息,而页面的其他部分仍然可以正常工作:
比如我们上图的右下角子路由出现了问题,那么这块会展示出问题时的错误页面,而其他页面部分仍然展示正常的信息.
正因为错误经常发生,且处理错误异常困难,包含客户端、服务端的各种错误,包含预期的、非预期的错误等,所以 Remix 内建了完善的错误处理机制,提供了类似 React 的 ErrorBoundary 的理念.
在 Remix 中,每个路由函数对应一个 ErrorBoundary 函数:
ErrorBoundary 函数代表处理那些来自 loader 和 action,客户端或服务端的非预期的错误,当出现这些非预期的错误时,就会激活这个函数,显示对应函数的表示错误信息的 UI.
同时每个路由函数对应着一个 CatchBoundary 函数:
CatchBoundary 函数对应着预期的错误,即你在 loader、action 函数中,在客户端或服务端,手动抛出的 Response 错误,这些错误的路径是可预期的,在 CatchBoundary 中,通过 useCatch 钩子获取这些抛出的 Response 错误,然后展示对于的错误信息的 UI.
当我们没有在子路由中添加 ErrorBoundary 或 CatchBoundary 函数时,一旦遇到错误,这些错误就会向更上一级的路由冒泡,直至最顶层的路由页面,所以你只最好在最顶层的路由文件里声明一个 ErrorBoundary 和 CatchBoundary 函数,用于捕获所有可能的错误,然后在代码审查( Code Review)时及时排查出来.
Remix 专注于用 Web 基础技术,HTML/CSS + HTTP 等解决问题,同时提供了在 Web 全栈开发框架中所需要的所有状态和所有基础组件.
其中相关状态包含:
以及 Web 网站组成的基础组件:
同时在路由函数所在文件里,可以通过声明 link 、meta 、links 、headers 等函数来声明对应的功能:
由此可见,Remix 提供了整个全栈 Web 开发生命周期所需要的几乎的一切内容,且内置最佳实践,确保你付出很少的努力就能开发出性能卓越、体验优秀的网站.
当然这篇文章并不能包含所有 Remix 的特性,看到这里仍然对 Remix 感兴趣的同学可以访问官网(https://remix.run/)详细了解哦~ 官网提供了非常详细的实战教程帮助你使用 Remix 开发实际的应用.
了解了 Remix 的特性之后,你对 Remix 有什么看法呢?你觉得它能超过 Next.js?
【编辑推荐】https://mp.weixin.qq.com/s/_LHjkkupb-ZMLEI5RhANvg 。
最后此篇关于Next.js 强劲对手来了! Remix 正式宣布开源的文章就讲到这里了,如果你想了解更多关于Next.js 强劲对手来了! Remix 正式宣布开源的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
这个问题已经有答案了: How to modify a public field of a field of a field… As in link.next.next.next(.next*n) n
我有一个保存链接的数组。每个链接都有一个名为 next 的公共(public)字段,它可以保存另一个链接,该链接可以保存更多链接等。当我想删除东西时我可以做 array[x].next = array
文档概述了在中间件中使用“await next()”的用例,导致中间件暂停并触发下游的下一个中间件,直到所有中间件都执行完毕,此时上游级联将开始并且中间件将完整执行。如果用户想要缩短级联,那么单独写“
我今天遇到了一个用例,我试图让我的 nextjs 应用程序在 android webview 中工作,不幸的是 android 不解析以 _next 开头的路径并且我的大部分块文件都在_next/st
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
next-with-apollo npm 库和 the approach shown in next.js docs 中选择的“next.js 中的 apollo-client”方法对比. next.
我尝试使用 next-auth 获取凭据身份验证,但我没有使用它的经验,无论我做什么,我都会收到以下消息:[next-auth][error][callback_credentials_jwt_err
更改语言时需要更改路线名称。例如,我有一条路线 /en/career但是当我改成捷克语时,我需要一条路线 /cs/kariera .基本上我需要本地化 URL。现在,当我在 /en/career 上时
更好/优雅的方法是什么? jQuery(this).find('title').next().next().next().eq(0).text(); //THIS WORKS 我尝试使用 jQuery
我只是对 node 感到好奇。 node.next 和 node.next。到目前为止,我们已经了解到节点有两个部分,其中存储数据和下一个节点的地址(node.next),然后是 node.next.
好的,我正在尝试单独隐藏这组信息。 这有效: $(".arrow").click(function() { $(this).next().next().slideToggle(); }); Mo
我开发了一个 Web 应用程序,它使用 Nextjs 应用程序作为前端和一个 Python (Django) API 服务器作为后端。我的大多数前端页面都有对后端服务器的 API 调用(在 Compo
如果我没有通过身份验证,我正在尝试使用NextJS中间件保护一些路由,我正在使用Next-auth进行身份验证,从文档中看,这就是MIDDLEWAR.TS文件应该是什么样子。Rn的问题是,即使当我通过
我正在使用 nextJs,需要添加对 less 和 css 的支持。我想要一个项目同时拥有 next-css 和 next-less 。但它一次接受一个。这是我正在使用的 const withCSS
我正在构建下一个项目的 typescript 。如果我将此配置文件保留为 next.config.js , 我在 tsconfig.json 收到警告说“找不到next.config.ts”。所以 t
我有一个自定义登录网址/ View /模板。我对页面使用 @login_required 装饰器(让 称为 my_page) 需要登录。试图访问 my_site.com/my_page 正确调用 my
下面的代码工作正常: class String def foo next! end end puts 'hh'.foo # hi 这个也很好用: class String d
我在我的Next.js应用程序中使用Next-auth进行身份验证。成功登录后,我立即被重定向到登录页面,表明该会话已变为未经身份验证。。相关代码片段:。_app.tsx:。Layout.tsx:。L
我想在 nextjs 中创建动态页面以匹配以下路由 users/[user]/[dashboard]。我的文件结构 pages/ users/ -[user].js // will
我直接按照官网的步骤操作: https://nextjs.org/docs/ 第一步。 npm install --save next react react-dom 步骤 2. 将脚本添加到 pac
我是一名优秀的程序员,十分优秀!