Cloudflare Pages、Worker 和 KV：實現伺服器端渲染的強大組合

當今的數位世界中，網站用戶要求即時、動態和高度互動的體驗。我們需要確保用戶始終能夠訪問最新的內容，同時保持優秀的性能。在這方面，透過結合 Cloudflare Pages、Worker 和 KV，我們可以實現伺服器端渲染，提供動態且實時的內容，從而提升網站的性能和可用性。本文將深入探討這三個工具，解釋它們如何協同運作，以實現即時伺服器端渲染，提供更出色的用戶體驗。

在經營技術博客的過去五年，儘管靜態網站生成方法在某些方面具有優勢，但它們也帶來了一些困難和挑戰。

The Eminence in Shadow (Shadow sama)

隨著我寫得越來越多技術文章，靜態技術博客的生成過程變得越來越耗時。每當我想要更新或新增一篇文章時，都需要等待生成過程完成，這不僅浪費了寶貴的時間，還限制了我及時發布新內容的能力。

在靜態網站生成方法下，如果我需要對一篇文章進行修改，就必須重新生成整個網站。這種不便使得修改內容變得相對複雜，並且容易引入錯誤。我渴望一種更加靈活的方式，能夠輕鬆地修改單個文章而無需影響整個網站的運作。

隨著博客的訪問量增加，我開始關注性能優化，想要確保博客的快速加載時間，以提供卓越的用戶體驗。

這些問題和挑戰在博客運行的過程中浮現，它們激發我尋找更好解決方案的動力。正當面對博客運行五年中所遇到的種種問題時，我偶然遇見了兩個強大的工具——Astro 和 Cloudflare，這兩者的結合提供了一個嶄新的解決方案，有望解決之前所面臨的困難。

Calpa Blog Website Revamp: Astro + Vue (Calpa Liu)

Astro，一個現代化的靜態網站生成器，它不僅提供了快速的網站生成能力，還支持部分更新，這意味著我們可以更有效率地處理文章的修改，而不需要重新生成整個網站。這為我們帶來了極大的便利，讓我們能夠更輕鬆地管理和維護我們的內容。

在不久前的八月，我寫了一篇名為《重構博客網站：Astro 與 Vue 重構心得分享》，詳細分享了我如何運用 Astro 和 Vue 來重構我的網站，以及在這個過程中的心得體會。

在接下來的章節中，我們將討論我們研究和實施的解決方案，以應對這些問題並改進博客的運作。這裏會重點展開來說 Cloudflare。

在接下來的章節中，我們將深入瞭解如何利用 Astro 和 Cloudflare 這一強大組合，解決我們之前遇到的問題，同時提高我們博客的性能、可用性和管理效率。讓我們一同探索這些工具如何為我們的博客帶來新的可能性和優勢。

實戰部分

這種方法尤其適用於需要經常更新的內容，例如文章元數據。通過使用 Cloudflare KV 和 Cloudflare Workers，您可以實現高性能的實時數據獲取，同時保持內容的最新狀態，提供更優的用戶體驗。

儲存數據到 KV

現在，讓我們來看看如何使用這些工具實現實時數據獲取。博客網站需要根據用戶的請求動態地獲取文章的元數據，例如標題、描述和圖像。

首先，我將每篇文章的 metadata 儲存為 JSON 對象，並使用文章的 slug（或其他唯一識別符）作為鍵（key）。這樣，我能夠輕鬆地通過 slug 查找和檢索文章的 metadata。

以下是一個示例：

// 假設這是一篇文章的 metadata
const articleMetadata = {
  title: "文章標題",
  description: "文章描述",
};

// 使用文章的 slug 作為 KV 的鍵
const slug = "unique_article_slug";

// 儲存文章 metadata 到 KV
await process.env.CALPA_BLOG.put(
  `article_${slug}`,
  JSON.stringify(articleMetadata)
);

從 KV 中讀取數據

當需要讀取文章 metadata 時，我可以根據文章的 slug 從 KV 中獲取對應的 JSON 字符串，然後使用它來渲染我的網頁。

// 使用 Astro 的本地環境（locals）中的 runtime 對象，它包含了您網站的運行時信息。
const runtime = Astro.locals.runtime;

// 這行代碼首先嘗試從 Cloudflare KV 中根據文章的 slug 獲取相應的數據。
// CALPA_BLOG 是您的 KV 命名空間，`article_${slug}` 是特定文章的鍵。
// 如果找不到對應的數據，則返回空對象 `{}`。
const articleMetadata =
  (await runtime?.env?.CALPA_BLOG?.get(`article_${slug}`)) || `{}`;

let title = "";
let description = "";
if (articleMetadata !== "{}") {
  // 將從 KV 中獲取的 JSON 字符串轉換為 JavaScript 對象，然後通過 generatePostMetadata 函數處理數據。
  const object = generatePostMetadata(JSON.parse(articleMetadata));

  // 現在我可以使用 articleMetadata 來渲染我的網頁
  title = articleMetadata.title;
  description = articleMetadata.description;
  // 渲染網頁的其他部分。..
} else {
  // 如果找不到相應的 metadata，我處理適當的錯誤或輸出默認值
}