文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

我们一起理解 React 服务端组件

2024-11-29 23:24

关注

自从 React 首次被引入以来,经历了几次演变。 React 团队并不羞于改变:如果他们发现了更好的问题解决方案,就会采用。

React 团队推出了 React 服务端组件(React  Server Components),这是最新的编写范式。 React 组件有史以来第一次可以专门在服务器上运行。

网上对这个概念有太多不理解。许多人对服务端组件是什么、如何工作、有什么好处以及是如何与服务器端渲染等内容结合使用存在很多疑问。

我一直在使用 React 服务端组件进行大量实验,也回答了我自己产生的很多问题。我必须承认,我对这些东西比我预想的要兴奋得多,因为它真的很酷!

今天,我将帮助你揭开 React 服务端组件的神秘面纱,回答你可能对 React 服务端组件存在的许多问题!

服务端渲染快速入门

由于实际场景中,React 服务端组件通常与服务端渲染(Server Side Rendering,简称 SSR)配合使用,因此预先了解服务端渲染的工作原理会很有帮助。当然,如果你已经很熟悉 SSR 了,则可以跳过本节的学习。

在我 2015 年第一次使用 React 时,那时候的大多数 React 项目都还采用“客户端渲染”策略。

在客户端渲染模式下,用户会先收到下面这样一个比较简单的网页。



  
    

bundle.js 包含整个项目初始化和运行阶段的所有代码。包括 React、其他三方依赖以及我们自己的业务代码。

JS 文件下载并解析后,React 会立即介入,准备好渲染应用所需要的 DOM 节点,并插入到空的 

 里。到这里,用户就得到可以交互的页面了。

虽然这个空的 HTML 文档会很快接收,但 JS 文件的下载和解析是需要一些时间的,另外随着我们项目规模的扩大,JS 文件本身的体积可能也在不断变大。

在客户端接收到 HTML 文档,到 JS 文件处理结束的中间阶段,用户通常会面临白屏问题,这种体验就比较糟糕了。

服务端渲染就能有效的避免这种体验。服务端渲染会将我们首屏要展示的 HTML 内容在服务端预先生成,再发送到客户端。这样,客户端在接收到 HTML 时,就能渲染首屏内容,也就不会遇到白屏问题了。

当然,服务端渲染的 HTML 网页同样会包含 

我们看到 HTML 文档包含由 React 应用程序生成的 UI,即“Hello world!”段落。其实这属于服务器端渲染结果,跟 React 服务端组件没有关系。

再往下,是一个