书接上回，我们获取了仪表盘概览页面的数据，但是我们简要讨论了当前设置的两个限制：
数据在请求过程中是无意中形成一个瀑布流
仪表盘是静态的，因此任何数据更新都不会反映在应用程序上。
在本章节当中我们要讨论四个问题：
什么是静态渲染以及它如何提高应用程序的性能。
什么是动态渲染以及何时使用它。
使仪表板动态化的不同方法。
模拟缓慢的数据提取以观察会发生什么。
什么是静态渲染
通过静态渲染，数据提取和渲染在构建时（部署时）或重新验证数据时在服务器上进行。每当用户访问您的应用程序时，都会提供缓存的结果。静态渲染有几个好处：
更快的网站- 预渲染的内容可以缓存并在全球范围内分发。这确保世界各地的用户可以更快、更可靠地访问您的网站内容。
减少服务器负载- 由于内容已被缓存，您的服务器不必为每个用户请求动态生成内容。
SEO - 预渲染的内容更容易被搜索引擎抓取工具索引，因为页面加载时内容已经可用。这可以提高搜索引擎排名。静态渲染适用于没有数据或数据在用户之间共享的UI，例如静态博客文章或产品页面。它可能不适合包含定期更新的个性化数据的仪表板。
与静态渲染相反的是动态渲染。
什么是动态渲染
使用动态渲染，内容会在请求时（用户访问页面时）在服务器上为每个用户渲染。动态渲染有几个好处：
实时数据- 动态渲染允许您的应用程序显示实时或频繁更新的数据。这对于数据经常变化的应用程序来说是理想的选择。
用户特定内容- 更容易提供个性化内容，例如仪表板或用户配置文件，并根据用户交互更新数据。
请求时间信息- 动态渲染允许您访问只能在请求时知道的信息，例如 cookie 或 URL 搜索参数。
模拟缓慢的数据获取
我们正在构建的仪表板应用程序是动态的。但是，上一章中提到的一个问题仍然存在。如果一个数据请求比其他所有请求都慢，会发生什么情况？
我们模拟一次缓慢的数据获取，打开上一篇文章编写好的程序，现在我们编辑/app/lib/db.ts
// 增加一个延时函数
await new Promise((resolve) => setTimeout(resolve, 3000));
const result: QueryResult<T> = await client.query(text, params);
console.log("延时增加3秒");
在这里，人为地添加了3秒延迟来模拟缓慢的数据提取。结果是，现在整个页面在提取数据时无法向访问者显示UI。
通过动态渲染，您的应用程序的速度仅与最慢的数据获取速度一样快，如何实现请看下一章总结。
更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
