React Server Component: 混合式渲染

本文介绍了React Server Component的原理和优势,探讨了混合式渲染如何在服务端和客户端之间平衡,包括减少Bundle体积、更好地利用服务端能力、自动化Code Splitting,并讨论了可能的劣势,如弱网环境下的交互体验和开发者心智负担。文中还提供了应用场景——文档站的案例。
摘要由CSDN通过智能技术生成

作者:谢奇璇

React 官方对 Server Comopnent 是这样介绍的: zero-bundle-size React Server Components。

这是一种实验性探索,但相信该探索是个未来 React 发展的方向,与 React Server Component 相关的周边生态正在积极的建设当中。

术语介绍

在 React Server Component (以下称 Server Component) 推出之后,我们可以简单的将 React 组件区分为以下三种:

Server Component 服务端渲染组件,拥有访问数据库、访问本地文件等能力。无法绑定事件对象,即不拥有交互性。
Client Component 客户端渲染组件,拥有交互性。
Share Component 既可以在服务端渲染,又可以在客户端渲染。具体如何渲染取决于谁引入了它。当被服务端组件引入的时候会由服务端渲染当被客户端组件引入的时候会由客户端渲染。

React 官方暂定通过「文件名后缀」来区分这三种组件:

  1. Server Component 需要以 .server.js(/ts/jsx/tsx) 为后缀
  2. Client Component 需要以 .client.js(/ts/jsx/tsx) 为后缀
  3. Share Component.js(/ts/jsx/tsx) 为后缀

混合渲染

简单来说 Server Component 是在服务端渲染的组件,而 Client Component 是在客户端渲染的组件。

与类似 SSR , React 在服务端将 Server Component 渲染好后传输给客户端,客户端接受到 HTML 和 JS Bundle 后进行组件的事件绑定。不同的是:Server Component 只进行服务端渲染,不会进行浏览器端的 hyration(注水),总的来说页面由 Client Component 和 Server Component 混合渲染。

这种渲染思路有点像 Islands 架构,但又有点不太一样。

如图:橙色为 Server Component, 蓝色为 Client Component 。

React 是进行混合渲染的?

React 官方提供了一个简单的 Demo , 通过 Demo,探索一下React sever component的运作原理。

渲染入口

浏览器请求到 HTML 后,请求入口文件 - main.js, 里面包含了 React RuntimeClient Root,Client Root 执行创建一个 Context,用来保存客户端状态,与此同时,客户端向服务端发出 /react 请求。

// Root.client.jsx 伪代码

function Root() {
    const [data, setData] = useState({});
    
    // 向服务端发送请求
    const componentResponse = useServerResponse(data);
    return (
        <DataContext.Provider value={[data, setData]}> 
            componentResponse.render();
        </DataContext.Provider>
    );
}

看出这里没有渲染任何真实的 DOM, 真正的渲染会等 response 返回 Component 后才开始。

请求服务端组件

Client Root 代码执行后,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值