编程语言
173
上一章中，你为仪表板概览页面获取了数据。然而，我们简要讨论了当前设置的两个限制：
- 数据请求正在无意中创建瀑布式加载。
- 仪表板是静态的，因此任何数据更新都不会在你的应用程序中反映出来。
在本章中...
我们将介绍以下主题：
- 什么是静态渲染以及它如何改善你的应用程序的性能。
- 什么是动态渲染以及何时使用它。
- 使仪表板动态化的不同方法。
- 模拟缓慢的数据获取，看看会发生什么。
什么是静态渲染?
在静态渲染中，数据获取和渲染在服务器上于构建时（部署时）或重新验证数据(revalidating data)时发生。
每当用户访问你的应用程序时，都会提供缓存的结果。静态渲染有几个优点：
- 更快的网站访问 - 预渲染的内容可以被缓存并在全球范围内分发。这确保了世界各地的用户能够更快、更可靠地访问你的网站内容。
- 减少服务器负载 - 由于内容已缓存，服务器不需要为每个用户请求动态生成内容。
- 搜索引擎优化（SEO） - 预渲染的内容更易于搜索引擎抓取，因为页面加载时内容已可用。这可能会提高搜索引擎排名。
静态渲染适用于无数据或用户共享数据的 UI，例如静态博客文章或产品页面。对于具有定期更新的个性化数据的仪表板，静态渲染可能不太合适。
与静态渲染相对的是动态渲染。
该做个小测验了！
为什么静态渲染可能不适合仪表板应用程序？
- A. 因为它会使网站变慢
- B. 因为服务器负载会增加
- C. 因为应用程序不会反映最新的数据更改
- D. 因为你需要一个内容分发网络
什么是动态渲染?
在动态渲染中，内容在每次用户请求时（用户访问页面时）在服务器上进行渲染。动态渲染有几个优点：
- 实时数据 - 动态渲染允许你的应用程序显示实时或经常更新的数据。对于数据频繁变化的应用程序，这是理想的选择。
- 用户个性化 - 更容易提供个性化内容，例如仪表板或用户资料，并根据用户交互更新数据。
- 请求时信息 - 动态渲染允许你访问只能在请求时知道的信息，例如 Cookies 或 URL 搜索参数。
该做个小测验了！
哪些信息只能在请求时才能知道？
- A. 数据库架构
- B. URL 路径
- C. Cookies 和 URL 搜索参数
模拟缓慢的数据获取
我们正在构建的仪表板应用程序是动态的。
然而，上章中提到的一个问题依然存在。如果某个数据请求比其他所有请求都慢，该怎么办？
让我们模拟一个缓慢的数据获取。在你的 data.ts 文件中，取消注释 fetchRevenue() 内的 console.log 和 setTimeout：
// /app/lib/data.ts export async function fetchRevenue() { try { // 为了演示目的，我们人为延迟了响应时间。 // 不要在生产环境中这样做 :) console.log('正在获取收入数据...'); await new Promise((resolve) => setTimeout(resolve, 3000)); const data = await sql<Revenue>`SELECT * FROM revenue`; console.log('数据获取在 3 秒后完成。'); return data.rows; } catch (error) { console.error('数据库错误:', error); throw new Error('获取收入数据失败。'); } }
现在，在新标签页中打开 http://localhost:3000/dashboard/，并注意页面加载时间变长。在你的终端中，你还应该看到以下消息：
正在获取收入数据... 数据获取在 3 秒后完成。
这里，你添加了一个人为的 3 秒延迟来模拟缓慢的数据获取。结果是，整个页面在数据获取时会阻止向访问者展示 UI。这带来了开发者常常需要解决的一个常见挑战：
使用动态渲染时，应用程序的速度取决于最慢的数据获取速度。
