當今的數位世界中，網站用戶要求即時、動態和高度互動的體驗。透過結合 Cloudflare Pages、Workers 和 KV 實現伺服器端渲染，提供動態且實時的內容，從而提升網站的性能和可用性。本文將探討如何將他們互相配合，實現即時伺服器端渲染，提供更出色的用戶體驗。
技術博客五年來遇到的問題
在經營技術博客的過去五年，儘管靜態網站生成方法在某些方面具有優勢，但它們也帶來了一些困難和挑戰。
隨著我寫得越來越多技術文章，靜態技術博客的生成過程變得越來越耗時。每當我想要更新或新增一篇文章時，都需要等待生成過程完成，這不僅浪費了寶貴的時間，還限制了我及時發布新內容的能力。
在靜態網站生成方法下，如果我需要對一篇文章進行修改，就必須重新生成整個網站。這種不便使得修改內容變得相對複雜，並且容易引入錯誤。我渴望一種更加靈活的方式，能夠輕鬆地修改單個文章而無需影響整個網站的運作。
隨著博客的訪問量增加，我開始關注性能優化，想要確保博客的快速加載時間，以提供卓越的用戶體驗。
這些問題和挑戰在博客運行的過程中浮現，它們激發我尋找更好解決方案的動力。正當面對博客運行五年中所遇到的種種問題時，我偶然遇見了兩個強大的工具——Astro 和 Cloudflare，這兩者的結合提供了一個嶄新的解決方案，有望解決之前所面臨的困難。
Astro，一個現代化的靜態網站生成器，它不僅提供了快速的網站生成能力，還支持部分更新，這意味著我們可以更有效率地處理文章的修改，而不需要重新生成整個網站。這為我們帶來了極大的便利，讓我們能夠更輕鬆地管理和維護我們的內容。
在不久前的八月，我寫了一篇名為 《重構博客網站：Astro 與 Vue 重構心得分享》，詳細分享了我如何運用 Astro 和 Vue 來重構我的網站，以及在這個過程中的心得體會。
在接下來的章節中，我們將討論我們研究和實施的解決方案，以應對這些問題並改進博客的運作。這裏會重點展開來說 Cloudflare。
Cloudflare
Cloudflare 以其卓越的安全性功能而聞名。作為一家以保護網站免受威脅和攻擊而著稱的公司，Cloudflare 提供了多種安全性工具，從 DDoS 攻擊保護到免費的 SSL/TLS 加密。這確保了我的網站數據和用戶的隱私得到了充分的保護，使我能夠提供一個安全的線上環境。
Cloudflare 提供了許多非常好用的開發工具，Cloudflare CDN 提供全球 CDN 的自動配置，這使我們的網站能夠在全球範圍內快速加載，為我們的讀者提供更佳的用戶體驗。而 Cloudflare Worker 則賦予了我們無伺服器計算的能力，這使我們能夠以更智慧的方式處理實時數據和動態內容，從而提高了網站的性能和反應速度。此外，Cloudflare KV（Key-Value） 提供了高性能的分佈式數據存儲，這為我們存儲和檢索數據提供了極低的延遲時間，使我們能夠實現更即時的數據更新。
在接下來的章節中，我們將深入瞭解如何利用 Astro 和 Cloudflare 這一強大組合，解決我們之前遇到的問題，同時提高我們博客的性能、可用性和管理效率。讓我們一同探索這些工具如何為我們的博客帶來新的可能性和優勢。
Cloudflare Pages：快速建立全球 CDN 的網站
Cloudflare Pages 是一個無伺服器靜態網站託管服務，可讓您快速輕鬆地部署和託管您的靜態網站。它同時支援 HTML、CSS 及 JavaScript，讓您可以建立現代化且響應迅速的網站。Cloudflare Pages 利用 Cloudflare 的全球 CDN 將您的網站內容提供給全球各地的訪客，確保您的網站隨時隨地都能快速訪問。此外，Cloudflare Pages 具有內建的安全性功能，如 DDoS 保護、WAF 及 SSL/TLS 加密，可確保您的網站免受安全威脅。
每當您將新的代碼推送到 Git 存儲庫時，Cloudflare Pages 將自動進行構建和部署您的網站。在免費方案中，您每個月最多可以進行 500 次構建。每次構建的時間限制為 20 分鐘。
每個 Cloudflare Pages 項目都有特定數量的自定義域名限制。免費方案：最多可以擁有 100 個自定義域名。
Cloudflare Workers：處理實時數據的無伺服器計算
Cloudflare Workers 是一個無伺服器雲端運算平台，允許開發人員在 Cloudflare 的全球邊緣網路中執行程式碼。它可以用於構建各種各樣的應用程式，例如內容快取、負載平衡、Web 安全和 API 閘道。Cloudflare Workers 不需要伺服器或基礎架構，而是在 Cloudflare 的邊緣伺服器上執行，這使其非常快速和響應迅速。它還具有高彈性，能夠處理大量流量。Cloudflare Workers 是一種強大的工具，可讓開發人員構建快速、安全的應用程式，而無需擔心基礎設施的管理。
用戶可以免費使用 Workers 的基本功能，方案包括對 Workers、Pages Functions 和 Workers KV 的有限使用。付費的 Workers 方案提供更多的使用權限和額度，特別是針對 HTTP 請求的處理時間和數量。值得注意的是，通常一個 HTTP 請求的處理時間會超過 100 毫秒，這意味著我們不能在免費版本下處理 HTTP 請求可能會受到限制。當我的博客網站需要處理大量的 HTTP 請求時，為了確保高效率和穩定性，我就升級到付費方案了。
https://workers.cloudflare.com/
Cloudflare KV：動態數據存儲
CloudFlare KV 是一種全球分佈的無伺服器鍵值儲存資料庫服務，易於使用，並與現有的 Web 服務無縫集成。它提供了快速的一致性讀取和原子寫入，非常適合儲存快取數據、應用程式狀態、元數據或任何需要快速訪問的資料。CloudFlare KV 具有高度的可擴展性，可以輕鬆地處理來自世界各地的大量請求。它還提供了一個用戶友好的儀表板，用於監控和管理資料庫。
https://developers.cloudflare.com/kv/
實戰部分
這種方法尤其適用於需要經常更新的內容，例如文章元數據。通過使用 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 中獲取相應的元數據。這使您能夠動態地為每個用戶提供最新的文章信息，而不需要預先生成這些數據。
後記
回顧過去五年，我深刻體會到前端技術的快速發展和變革。在這段時間裡，我不斷嘗試和適應新的技術工具，追求更高效、更優雅的解決方案，並不斷學習和成長。然而，有一件事情始終不變，那就是我對於追求技術的熱情。
這五年裡，我的常用技術工具經歷了多次轉變。我從最初的靜態網站生成器，走過了動態網頁應用、伺服器端渲染，再到現在的 Astro 和 Cloudflare 的結合。每個工具和框架都帶來了新的挑戰和機會，讓我能夠不斷優化我的網站，提供更好的用戶體驗。
無論我使用什麼樣的技術工具，我的熱情始終如一。技術的變化是不可避免的，但這種變化也激勵著我不斷學習，保持開放的心態，並探索新的可能性。我相信，技術是改變世界的力量，而我所做的每一次嘗試和創新都是邁向更好未來的一步。
無論未來的技術走向如何，我將繼續熱衷於追求技術，解決現實世界的問題，繼續與技術社區分享我的經驗和知識。只要保持熱情和不斷學習，我們就能夠應對任何技術挑戰，創造未來。感謝您一直陪伴我走過這段旅程，期待著未來的冒險和探索。
