静态渲染和动态渲染

在上一章中，你获取了仪表盘概览页面的数据。然而，我们简要讨论了当前设置的两个限制

1. 数据请求正在造成意外的瀑布流。
2. 仪表盘是静态的，因此任何数据更新都不会反映在你的应用程序中。

在本章中...

我们将涵盖以下主题：

什么是静态渲染以及它如何提高应用程序的性能。

什么是动态渲染以及何时使用它。

使仪表盘动态化的不同方法。

模拟一个慢速数据获取以查看会发生什么。

什么是静态渲染？

通过静态渲染，数据获取和渲染发生在构建时（部署时）或重新验证数据时在服务器上进行。

每当用户访问你的应用程序时，都会提供缓存结果。静态渲染有以下几个好处

• 更快的网站 - 预渲染的内容在部署到Vercel等平台时可以被缓存并全球分发。这确保了世界各地的用户可以更快、更可靠地访问你网站的内容。
• 减少服务器负载 - 由于内容被缓存，你的服务器无需为每个用户请求动态生成内容。这可以降低计算成本。
• SEO - 预渲染的内容更容易被搜索引擎爬虫索引，因为页面加载时内容已经可用。这可以提高搜索引擎排名。

静态渲染适用于没有数据或数据在用户之间共享的UI，例如静态博客文章或产品页面。它可能不适合包含个性化数据并定期更新的仪表盘。

与静态渲染相对的是动态渲染。

什么是动态渲染？

通过动态渲染，内容在请求时（当用户访问页面时）为每个用户在服务器上渲染。动态渲染有以下几个好处

• 实时数据 - 动态渲染允许你的应用程序显示实时或频繁更新的数据。这对于数据经常变化的应用程序来说是理想的选择。
• 用户特定内容 - 更容易提供个性化内容，例如仪表盘或用户资料，并根据用户交互更新数据。
• 请求时信息 - 动态渲染允许你访问只能在请求时知道的信息，例如 cookie 或 URL 搜索参数。

模拟慢速数据获取

我们正在构建的仪表盘应用程序是动态的。

然而，上一章中提到的一个问题仍然存在。如果一个数据请求比所有其他请求都慢，会发生什么？

让我们模拟一个慢速数据获取。在 app/lib/data.ts 中，取消注释 fetchRevenue() 中的 console.log 和 setTimeout

export async function fetchRevenue() {
  try {
    // We artificially delay a response for demo purposes.
    // Don't do this in production :)
    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000));
 
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
 
    console.log('Data fetch completed after 3 seconds.');
 
    return data;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

现在在新标签页中打开 https://:3000/dashboard/，注意页面加载时间变长。在你的终端中，你还会看到以下消息

Fetching revenue data...
Data fetch completed after 3 seconds.

在这里，你添加了一个人为的 3 秒延迟来模拟慢速数据获取。结果是，现在你的整个页面在数据获取完成之前都被阻止向访问者显示UI。这给我们带来了开发者必须解决的一个常见挑战

通过动态渲染，你的应用程序的速度仅取决于你最慢的数据获取速度。