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，我處理適當的錯誤或輸出默認值
}

透過 Astro，我們可以使用 Cloudflare Worker 來處理用戶的請求。當用戶訪問特定的文章鏈接時，Worker 可以根據請求中的 slug，從 KV 中獲取相應的元數據。這使您能夠動態地為每個用戶提供最新的文章信息，而不需要預先生成這些數據。

後記

Shirakawa Lane (Calpa Liu)

回顧過去五年，我深刻體會到前端技術的快速發展和變革。在這段時間裡，我不斷嘗試和適應新的技術工具，追求更高效、更優雅的解決方案，並不斷學習和成長。然而，有一件事情始終不變，那就是我對於追求技術的熱情。

這五年裡，我的常用技術工具經歷了多次轉變。我從最初的靜態網站生成器，走過了動態網頁應用、伺服器端渲染，再到現在的 Astro 和 Cloudflare 的結合。每個工具和框架都帶來了新的挑戰和機會，讓我能夠不斷優化我的網站，提供更好的用戶體驗。

無論我使用什麼樣的技術工具，我的熱情始終如一。技術的變化是不可避免的，但這種變化也激勵著我不斷學習，保持開放的心態，並探索新的可能性。我相信，技術是改變世界的力量，而我所做的每一次嘗試和創新都是邁向更好未來的一步。

無論未來的技術走向如何，我將繼續熱衷於追求技術，解決現實世界的問題，繼續與技術社區分享我的經驗和知識。只要保持熱情和不斷學習，我們就能夠應對任何技術挑戰，創造未來。感謝您一直陪伴我走過這段旅程，期待著未來的冒險和探索。