原文地址：https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering (opens new window)

在上一章中，您为Dashboard Overview页面获取了数据。但是，我们简要讨论了下面2种情况：

• 数据请求正在创建一个unintentional waterfall。
• 仪表板是静态的，因此任何数据更新都不会反映在您的应用程序上。

本章目标：

• 什么是静态渲染，以及它如何提高应用程序的性能。
• 什么是动态渲染以及何时使用它。
• 使您的仪表板动态化的不同方法。
• 模拟缓慢的数据提取，看看会发生什么。

什么是静态渲染

使用静态渲染，数据获取和渲染在构建时（部署时）在服务器上进行或者在重新验证数据 (opens new window)时。 每当用户访问您的应用程序时，会存一些缓存。静态渲染有几个好处：

• 更快的访问网站：预渲染的内容可以缓存并全局分发。这确保了世界各地的用户能够更快、更可靠地访问您网站的内容。
• 降低服务器负载：因为内容是缓存的，所以服务器不必为每个用户请求动态生成内容。
• SEO：搜索引擎爬网程序更容易对预先呈现的内容进行索引，因为加载页面时内容已经可用。这可以提高搜索引擎的排名。

静态渲染对于没有数据或用户之间共享数据的UI非常有用。例如静态博客文章或产品页面。它可能不太适合具有定期更新的个性化数据的仪表板。 与静态渲染相反的是动态渲染。

什么是动态渲染

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

• 实时数据：动态渲染允许应用程序显示实时或频繁更新的数据。这非常适合数据经常更改的应用程序。
• 用户特定内容：更容易提供个性化内容，如仪表板或用户配置文件，并根据用户交互更新数据。
• 请求时间信息：动态呈现允许您访问只有在请求时才能知道的信息，如cookie或URL搜索参数。

模拟慢网速获取数据

我们正在构建的仪表板应用程序是动态的。 然而，仍然存在上一章提到的一个问题。如果一个数据请求比其他所有数据请求都慢，会发生什么情况？ 让我们模拟一个缓慢的数据提取。在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.rows;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

现在打开http://localhost:3000/dashboard/ (opens new window)，在一个新的选项卡，并注意页面加载所需的时间。在您的终端中，您还应该看到以下消息：

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

在这里，您添加了手动控制的3秒延迟来模拟缓慢的数据提取。结果是，现在您的整个页面在获取数据时被阻止向访问者显示UI。这给我们带来了一个开发者必须解决的共同挑战： 使用动态渲染，应用程序的速度仅与最慢的数据提取速度，需要等待慢请求的数据显示。