靜態與動態渲染

在前一章節中，您為儀表板總覽頁面提取了資料。然而，我們簡要討論了目前設定的兩個限制：

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。這引導我們到開發人員必須解決的一個常見挑戰：

使用動態渲染，您的應用程式速度只會跟上最慢的資料提取速度。