靜態和動態渲染

在上一章中，您擷取了儀表板概覽頁面的數據。然而，我們簡要地討論了目前設置的兩個限制

1. 數據請求正在無意中造成瀑布式延遲。
2. 儀表板是靜態的，因此任何數據更新都不會反映在您的應用程式上。

在本章中...

以下是我們將涵蓋的主題

什麼是靜態渲染，以及它如何提升應用程式的效能。

什麼是動態渲染，以及何時使用它。

使儀表板動態化的不同方法。

模擬緩慢的數據擷取以查看會發生什麼。

什麼是靜態渲染？

使用靜態渲染，數據擷取和渲染會在建置時（部署時）或重新驗證數據時在伺服器上進行。

每當使用者造訪您的應用程式時，都會提供快取的結果。靜態渲染有幾個好處

• 更快的網站速度 - 預渲染的內容可以被快取並全域發佈。這確保世界各地的使用者可以更快、更可靠地存取您網站的內容。
• 減少伺服器負載 - 由於內容已被快取，您的伺服器不必為每個使用者請求動態產生內容。
• 搜尋引擎最佳化 (SEO) - 預渲染的內容更容易被搜尋引擎爬蟲索引，因為內容在頁面載入時就已經可用。這可以提升搜尋引擎排名。

靜態渲染適用於**沒有數據**或**數據在使用者之間共享**的使用者介面，例如靜態部落格文章或產品頁面。它可能不適合具有定期更新的個人化數據的儀表板。

與靜態渲染相反的是動態渲染。

什麼是動態渲染？

使用動態渲染時，伺服器會在請求時（當使用者瀏覽頁面時）為每個使用者渲染內容。動態渲染有幾個好處：

• 即時資料 - 動態渲染允許您的應用程式顯示即時或頻繁更新的資料。這非常適合資料經常變動的應用程式。
• 使用者特定內容 - 更容易提供個人化內容，例如儀表板或使用者個人資料，並根據使用者互動更新資料。
• 請求時資訊 - 動態渲染允許您存取只能在請求時才知道的資訊，例如 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。這帶我們來到開發人員必須解決的一個常見挑戰：

使用動態渲染時，您的應用程式速度取決於最慢的資料擷取速度。