什麼係 CDN？內容傳送網絡淺白解說
CDN（內容傳送網絡）係由分佈喺好多城市嘅伺服器組成嘅網絡，佢哋保存你網站嘅檔案，例如圖片、腳本、樣式表，有時仲有整個頁面。有人訪問你個網站嗰陣，佢會由離佢最近嘅位置提供內容，而唔係由一部遠方嘅伺服器提供。咁樣頁面會載入得更快，減輕你自己伺服器嘅負擔，亦幫助網站應付突如其來嘅流量高峰。
用 AI 建構時點解 CDN 重要
你可能從來冇親自設定過 CDN，因為好多託管平台會自動喺你網站前面放一個。但你會感受到佢嘅效果：
- 速度。 頁面載入更快，訪客就會留得更耐，而呢亦係搜尋引擎考慮嘅因素之一。請參閱點樣令你嘅網站更快。
- 「點解我嘅改動冇顯示？」 你發佈更新之後，舊版本嘅緩存副本可能會留低一段短時間。知道原因，就可以少好多困惑。
- 私隱同正確性。 如果 CDN 緩存咗錯嘅嘢，例如一個載有某位用戶資料嘅頁面，下一位訪客就可能睇到。知道邊啲嘢應該緩存、邊啲唔應該，有助你問啱問題。
日常比喻
想像一間麵包店，由一間店舖向全國銷售麵包。每位顧客，不論住得幾遠，都要等緊由嗰一間店送貨；遇上繁忙日子，排隊就會非常長。
CDN 就好似喺全國各地嘅街角小店都擺放同一款麵包。顧客可以就近、快速買到，而總店只需要偶爾補貨俾嗰啲街角小店。不過有個問題：如果總店改咗食譜，街角小店會繼續賣舊麵包，直到佢哋被通知更換，或者舊貨過期為止。
CDN 點運作
- 你嘅來源（origin）。 你嘅網站存放喺主伺服器或者託管平台，稱為來源。
- 邊緣位置（edge locations）。 CDN 喺好多地方設有伺服器，稱為邊緣位置或存在點（PoP）。
- 路由。 訪客請求你嘅網站時，DNS 或者網絡路由會將佢導去附近嘅邊緣位置。請參閱域名同 DNS 點運作。
- 緩存命中（cache hit）。 如果嗰個邊緣位置已經有一份新鮮嘅檔案副本，就即時送出。
- 緩存未命中（cache miss）。 如果冇，邊緣位置會由來源攞檔案，送俾訪客，同時保留一份副本俾下一位訪客用。
- 過期。 每份副本保留多久，由你嘅伺服器發送嘅緩存標頭決定，或者直至被清除為止。
實際例子：一個有相片嘅作品集網站
一位攝影師嘅作品集有主頁、一個有 60 張大圖嘅相冊，以及一條聯絡表格。來源伺服器喺歐洲。一位身在新加坡嘅訪客打開相冊。
- 冇 CDN： 每張圖都要由歐洲傳過嚟。每個請求都要跨越半個地球走一趟，所以相冊會慢慢先載入完成。
- 有 CDN： 首位新加坡附近嘅訪客觸發嗰度嘅邊緣位置去攞取同儲存圖片。之後喺同一地區嘅每位訪客，都會由附近攞到，快得多。
而家攝影師換咗主頁嘅主打相片，然後重新發佈。決定訪客會唔會見到新相片嘅，係以下嘅設定：
/index.html → 緩存時間短，經常檢查
/assets/index-3f9a2c.js → 緩存時間長
/assets/hero-8b41d0.jpg → 緩存時間長
包括 Vite 喺內嘅現代建構工具，會俾檔案雜湊名稱，例如 hero-8b41d0.jpg。檔案改咗，名稱就會跟住改，所以頁面會要求一個全新嘅檔案，而任何緩存都未見過呢個名稱。HTML 頁面本身只會短暫緩存，所以好快就會指向新檔案。咁樣就同時做到長緩存同即時更新，呢個係標準做法。
聯絡表格就唔同。表格提交每次都要送去伺服器，所以絕對唔應該緩存。
咩應該緩存，咩唔應該
| 通常長時間緩存 | 通常短時間緩存 | 共用 CDN 入面唔應該緩存 |
|---|---|---|
| 圖片、字型、影片 | 公開網站嘅 HTML 頁面 | 登入後嘅頁面、儀表板 |
| 雜湊名稱嘅 JavaScript 同 CSS | 偶爾更改嘅公開 API 數據 | 任何帶有個人資料嘅嘢 |
| 好少更改嘅可下載檔案 | 表格提交、付款、任何 POST 請求 |
重點名詞
| 名詞 | 意思 |
|---|---|
| 來源（Origin） | 你嘅主伺服器或主機，真正嘅檔案存放喺嗰度。 |
| 邊緣／PoP | CDN 嘅位置，就近為訪客提供服務。 |
| 緩存命中／未命中 | 邊緣位置有檔案／要由來源攞檔案。 |
| TTL | Time to live，即緩存副本保留幾耐。 |
| Cache-Control 標頭 | 你嘅伺服器發出嘅指示，講明某樣嘢可唔可以緩存，以及緩存幾耐。 |
| 清除（purge）／失效（invalidate） | 即刻話俾 CDN 棄掉緩存副本。 |
| 緩存破壞（cache busting） | 檔案改咗就更改佢嘅名稱或者 URL，令緩存攞新嘅版本。 |
| 延遲（latency） | 因距離同網絡節點而產生嘅延遲。 |
如要了解更廣泛嘅緩存（瀏覽器、伺服器同數據庫），請睇什麼係緩存。
常見誤解
- 「CDN 令所有嘢都更快。」 佢只係加速傳送檔案。數據庫查詢慢，或者伺服器上嘅 AI 調用慢，依然係慢。
- 「CDN 取代咗託管。」 佢係放喺你嘅託管前面。你依然需要一個來源。
- 「我更新咗網站，所有人即刻見到。」 舊副本可能會喺 CDN 同瀏覽器度留多一陣。要檢查就強制重新整理，亦應該用雜湊檔案名稱。
- 「緩存永遠安全。」 將個人化嘅頁面放喺共用緩存入面，係真正嘅私隱風險。私人回應應該標示為唔可以緩存。
- 「CDN 只係大公司先用得。」 好多主機都會為細網站包含一個，而你唔使額外做任何嘢。
向你嘅 AI 建構工具要求咩
- 「呢個網站前面有冇 CDN？佢緩存邊啲檔案，又緩存幾耐？」
- 「確保已建構嘅 JavaScript、CSS 同圖片有雜湊檔案名稱同長緩存時間，而 HTML 就用短緩存時間。」
- 「絕對唔好喺共用緩存入面緩存登入後嘅頁面，或者帶有個人資料嘅 API 回應。」
- 「壓縮同調整圖片大小，令相冊載入得快啲。」
- 「我已經發佈咗更新，但仲見到舊版本，係瀏覽器緩存定係 CDN 嘅問題？」
CDN 同 Mythex
喺 Mythex 發佈時，前端靜態網站會以靜態網站形式部署，而文件亦提到，更新之後 CDN 緩存可能會短暫滯後：如果你重新發佈後仲見到舊版本，強制重新整理公開網址就得。呢方面冇任何需要設定。如果你連接嘅自訂域名，DNS 放喺 Cloudflare，文件會要求你將紀錄設為「DNS only」而唔係 proxied，咁 Mythex 先可以正確簽發 HTTPS。請參閱文件中的點樣發佈同自訂域名，以及我哋嘅網頁託管指南。
常見問題
簡單嚟講，什麼係 CDN？
CDN（內容傳送網絡）係由好多位置嘅伺服器組成嘅網絡，佢哋保存你網站檔案嘅副本。訪客會由離佢哋最近嘅位置收到內容，而唔係由你嘅主伺服器，所以頁面載入更快，你嘅伺服器亦都做得少啲嘢。
我更新咗網站，點解仲見到舊版本？
通常係因為舊檔案嘅副本被緩存咗，可能喺 CDN 度、喺瀏覽器度，或者兩者都有。強制重新整理可以解決瀏覽器嗰邊；CDN 嘅副本會自己過期，或者可以清除。建構工具會為改咗嘅檔案俾新名字，避免大部分呢類問題。
細網站需唔需要 CDN？
好多時你未揀都已經有，因為好多託管平台會自動喺網站前面加一個 CDN。如果你嗰個冇，而你嘅訪客分佈喺唔同國家，加一個通常都值得。
CDN 可唔可以緩存我應用程式嘅數據同登入後嘅頁面？
佢可以緩存任何獲准緩存嘅嘢，所以一定要小心設定。圖片、腳本同樣式等公開檔案最適合緩存。個人或者登入後嘅內容，一般唔應該放喺共用 CDN 入面緩存，否則一位用戶可能會睇到另一位用戶嘅資料。