ReactJS服务器组件

React是一个用于开发网站前端的JavaScript库。自2013年推出以来，React在全球的web开发人员中获得了很大的流行。该库得到了社区的广泛支持，并从推出以来以很高的速度发展。

在2022年， React 发布了一个更新，引入了服务器组件。这使应用程序变得更快，并为 Next.js 打下了基础。随着服务器组件的引入，React引入了一种新的web开发形式。

ReactJS服务器组件

React中的服务器组件允许开发人员在服务器端呈现组件。这有助于在服务器端加载数据，从而只向客户端发送必要的数据。之前，组件在客户端上呈现，从服务器获取数据速度较慢。现在，由于服务器组件，可以更轻松、更快地获取数据。

在引入服务器组件并行获取之前，SSR（服务器端渲染）和架构操作是一些常用的技术，但它们都有自己的缺点，因为它们难以实现，需要很多维护工作，有时甚至会破坏用户体验。

服务器组件通过创建一个易于构建和易于维护的应用程序解决了这个问题。它们提供了创建零束大小组件的额外功能。这些组件在服务器端加载静态页面，甚至允许第三方包在服务器上加载，对束大小没有任何影响。服务器组件还解决了瀑布网络的问题。

在引入服务器组件之前，数据是使用客户端组件从数据库中获取的（如下图所示）：

服务器组件的工作原理

传统上，一旦构建了React应用程序，所有的包和捆绑包都会在客户端上渲染，因此不必要的数据也被导入到客户端上，但自从引入服务器组件以来，客户端只会以普通可序列化的字符串形式收到必要的数据，在客户端上渲染。

以前，客户端渲染是分多个步骤完成的，但现在只需一次调用服务器组件即可将所有必要的数据加载到客户端上。

服务器组件的特点

• 在服务器端渲染组件，如客户端组件、div、span等
• 在数据库和客户端端直接使用async/await函数
• 完全访问后端及其服务
• 自动代码拆分
• 消除瀑布式网络问题

使用服务器组件时的限制

• 无法使用像useState、useEffect等这样的hooks，因为组件直接在服务器端加载
• 无法使用浏览器提供的本地存储或其他API
• 无法使用依赖于浏览器API的自定义hooks

在React服务器组件中编码

React服务器组件中的代码看起来与普通的旧React代码完全相同，但如果我们在服务器组件代码中使用客户端组件代码，我们必须加上”use client”的标题，这将告诉React以下是一个客户端组件，必须在客户端上渲染。

客户端组件将无法访问服务器环境，但反之却不成立。因此，我们可以在服务器组件中包含客户端组件，但不能将服务器组件包含在客户端应用程序中。