【React18】利用悬念和React的服务器端渲染进化

你们有没有尝试过利用React18的功能？

我虽然还没有在工作中享受到这个令人惊叹的更新的好处，但在自学时我会尽情地探索。

因此，本次我們將來探討React 18的新功能——Suspense。

总结悬疑。

以往为创建大量的加载逻辑而进行的重复操作。

为了简化这个任务，React 18 将 Loading State 数据块移到组件外部并进行调用。

总之，为了在用户调用组件内数据时避免出现空白页面，使用Suspense包裹该组件进行渲染，在所有数据都被调用完毕后，将完成的组件输出到屏幕上。

简单来解释，就是这样的意思。

让我们实际看一下代码。

使用外部组件进行导入

这段代码之前的版本（从这样看来变得更简洁了）。

我能很快地了解影响范围，确认数据流，并变成非常好的代码。

SSR方式经过创新变得更加方便易用。

参考，网页加载方式（SSR、CSR、SSG）

让我们适时地使用悬念，以确保用户不会看到空白的屏幕。

这里比较容易调用的是已经显示在屏幕上的小型数据组件。

在服务器端加载悬疑片段的<大数据/>组件时，客户端的HTML页面

}>
在加载过程中，保持呼叫的HTML代码，例如：。
当加载完成时，用组件加载的HTML代码，例如：

…

，代替原来的内容显示在屏幕上。

当每个组件被渲染时，如果用户点击了尚未通过js文件就在浏览器中渲染的React组件，那么组件将优先执行用户期望的操作。

它保证了非常快速的渲染和易于使用。

接下来期望的是Server Components的全面展开。

选择性地渲染组件，通过浏览器渲染React.JS代码（CSR）或服务器渲染（SSR）。

换言之，当在服务器上进行组件渲染时，只需将渲染结果的值发送给用户，而无需用户直接下载庞大的JS数据，这样可以缩短加载时间并提高用户体验满意度。

同时，由于基本方式只接收安全性较弱的渲染值，所以不仅具备强大的安全性，而且易于使用、直观简单。

• file.server.js -> Server Component

• file.client.js -> Client Component

file.js -> Universal Component

请大家一定要尝试玩一玩。