静态和动态渲染

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

1. 数据请求正在创建意外的瀑布效应。
2. 仪表盘是静态的，因此任何数据更新都不会反映在您的应用程序上。

在本节中...

以下是我们将介绍的主题

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

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

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

模拟缓慢的数据获取以查看会发生什么。

什么是静态渲染？

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

每当用户访问您的应用程序时，都会提供缓存的结果。静态渲染有一些好处

• 更快的网站 - 预渲染内容可以被缓存和全局分发。这确保了世界各地的用户都可以更快、更可靠地访问您网站的内容。
• 减少服务器负载 - 由于内容被缓存，因此您的服务器无需为每个用户请求动态生成内容。
• 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.');
  }
}

现在在新标签页中打开https://127.0.0.1:3000/dashboard/，并注意页面加载需要多长时间。在您的终端中，您还应该看到以下消息

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

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

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