静态和动态渲染

在前一章中，您为仪表板概览页面获取了数据。但是，我们简要讨论了当前设置的两个限制

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://127.0.0.1:3000/dashboard/ 在新标签页中，并注意页面加载时间变长了。在您的终端中，您还应该看到以下消息

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

在这里，您添加了一个人为的 3 秒延迟来模拟缓慢的数据获取。结果是，在获取数据时，您的整个页面都被阻止向访问者显示 UI。这引出了开发者必须解决的一个常见挑战

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