文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么理解 React Server Component 和 Next.js 的关系

2024-11-30 05:26

关注

大家好,我卡颂。

最近Next.js v14发布,发布会的各种梗图刷爆了国外前端社区。

Next.js的诸多特性(比如Server Action、App Router),都是在RSC(React Server Component)基础上衍生出的。

从名字可以看出,RSC是React的特性。那么,该怎么理解RSC和Next.js的关系呢?

React团队的宿愿

对于前端框架的开发范式,有三个重要衡量因素:

但是,通常很难做到三者兼顾(具体原因本文不细究,感兴趣的同学可以看data-fetching-with-react-server-components[1]。

简单来说,在前端开发中,「IO瓶颈」是影响内容渲染速度的重要因素(可以简单理解为,前端需要等待请求返回数据后,再根据数据渲染内容,这期间延迟的时间就是「IO瓶颈」)。

但是,前端框架能够掌控的范围局限在前端,所以无法对「IO瓶颈」做出极致优化,只能在三个因素中做出取舍(比如考虑用户体验与性能时,代码维护成本就高)。

React团队为了同时兼顾三者,需要对服务端拥有更多掌控。这就是RSC诞生的初衷。

但是,大部分React的受众只是把React当作前端view库,并不会直接使用RSC相关功能,所以React团队选择和Next.js团队合作,落地RSC。

此时我们发现,React有三类受众:

  1. 普通前端开发者,用稳定的React做业务开发
  2. 其他合作团队(比如Next.js团队),React团队为他们提供API支持
  3. 喜欢尝鲜的开发者/团队,愿意尝试那些可能出现在未来版本中的特性(通常还不稳定)

React团队针对这三类受众,制定了三条版本迭代路径:

  1. Experimental路径

我们正常通过npm i react下载的React包就是「Latest路径」的打包产物。

通过npm update react@canary可以替换为canary包,RSC相关的功能就属于canary包。

同理,通过npm update react@xperimental可以替换experimental包。

脱离Next.js使用RSC

在Next.js的App Router模式,所有组件默认为服务端组件(即在服务端render的组件),只有当组件所在文件顶部标记了'use client'指令时,该组件是客户端组件(即在前端render的组件)。

比如下面就是个客户端组件:

'use client'
import {useState} from 'react';

function Cpn() {
  const [num, update] = useState(0);
  // ...省略
}

实际上,这并不是Next.js自己的定义,而是RSC中的规范。在React文档中,我们可以看到'use client'与'use server'规范的定义,其中:

既然是规范,那就需要落地。在Next.js中,规范的落地都被收敛到Next.js框架内部实现了。如果要脱离Next.js使用RSC,就需要我们自己落地规范。

RSC规范的落地包括三部分:

这三者都被收敛到react-server-dom-webpack[2]包中。

接下来我们简单讲下这三部分的作用。

服务端编译时

通过react-server-dom-webpack/plugin名字中的webpack、plugin字样能看出,这是个webpack插件,配置类似如下:

const ReactServerWebpackPlugin = require("react-server-dom-webpack/plugin");

const config = {
  // ...省略其他配置
  plugins: [
    new ReactServerWebpackPlugin({ isServer: false }),
  ],
}

他的作用是识别项目中的'use client'指令,作用有些类似于「全自动React.lazy」。

使用过React.lazy特性的同学会知道,当我们通过React.lazy懒加载组件时,懒加载的组件会被打包工具(比如webpack)打包成独立的chunk。当前端需要该组件时,会通过Jsonp请求chunk文件。

比如下面代码中的./Cpn.jsx组件由于懒加载,会被打包成独立的chunk:

import React from 'react';

const LayCpn = React.lazy(() => import('./Cpn.jsx'));

function App(props) {
  return ; 
}

与React.lazy类似,当我们在组件所在文件的顶部标记'use client'时,并在服务端组件的子孙组件中使用到该组件,该组件代码也会打包成独立的chunk。由于这个过程是全自动的,所以可以称为「全自动React.lazy」。

服务端运行时

上面讲到的编译产物都是「客户端组件对应chunk」,所以他们是不会在服务端运行时使用的。

服务端运行时的作用类似SSR,都是给定JSX输入,经过render后获得输出。比如,给定如下输入:

function App() {
  return 
hello
; }

对于SSR,会获得字符串'

hello
'的输出。

对于RSC规范,将输入传给react-server-dom-webpack/server导出的renderToPipeableStream方法,会获得如下序列化数据:

0:"$L1"
1:["$","div",null,{"children":"hello"}]

再让我们看一个稍微复杂点的例子:

我们有个组件Cpn,由于他包含客户端状态(使用了useState),所以只能作为客户端组件(顶部标记'use client'):

'use client'
import {useState} from 'react';

function Cpn() {
  const [num, update] = useState(0);
  // ...省略
}

现在,我们的服务端组件App返回值中包含了Cpn:

function App() {
  return 
; }

经由renderToPipeableStream方法,会获得如下序列化数据:

0:"$L1"
2:I["./src/app/Test.jsx",["client0","client0.chunk.js"],"Test"]
1:["$","div",null,{"children":["$","$L2",null,{}]}]

可以发现,序列化数据中并不包含具体的客户端组件代码,而是组件代码对应的文件(client0.chunk.js),这个文件就是我们在「服务端编译时」打包产生的chunk文件。

客户端运行时

当「服务端运行时」产生的「序列化数据」传递给前端时,react-server-dom-webpack又出场了,这次使用的是react-server-dom-webpack/client。

这个包提供了几个方法,用于将「从不同数据源获取的序列化数据」转换为「合法的React Element」,比如:

对于上述序列化数据:

0:"$L1"
2:I["./src/app/Test.jsx",["client0","client0.chunk.js"],"Test"]
1:["$","div",null,{"children":["$","$L2",null,{}]}]

经由react-server-dom-webpack/client中方法的转换,会得到一个React.lazy组件,这样前端的React就能正常render这个组件了。

总结

RSC规范属于React特性,来自于React Canary。规范的落地可以通过react-server-dom-webpack包实现。

整个工作流程包括三个阶段:

  1. 客户端运行时,对应react-server-dom-webpack/client。

在Next.js中,RSC规范的落地被集成到框架内部,做到了开箱即用的RSC,并在此基础上衍生出更完善的功能(App Router)。

参考资料

[1]data-fetching-with-react-server-components:https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html。

[2]react-server-dom-webpack:https://www.npmjs.com/package/react-server-dom-webpack。

来源:魔术师卡颂内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯