---
title: "低涉入網站靜態生成與 HTML 快取標準"
locale: zh-hant
category: knowledge_base
category_name: "知識庫"
translation_status: reviewed
license: cc_by
author: "injoys"
source_url: https://injoys.com/en/articles/low-involvement-web-static-generation-html-cache
published_at: 2026-11-05T07:45:55+09:00
---
# 低涉入網站靜態生成與 HTML 快取標準
> 在低涉入網站的技術設計中，應一併檢查初始 HTML 中的正文與 CDN 的 HTML 快取。TTFB 0.8 秒是效能改善的參考值，快取適用範圍與修改後的更新方式也須納入設計。
## Key Points
- 在初始 HTML 中包含核心正文，可減少對執行 JavaScript 的依賴。
- Google 會執行 JavaScript，因此不能僅憑使用 React 就判定搜尋引擎抓取失敗。
- TTFB 不超過 0.8 秒是效能改善的參考值，並不代表整個頁面的載入時間。
- Cloudflare CDN 預設不會快取 HTML，因此須檢查公開頁面的快取規則。
- HTML 快取須排除登入頁面，並制定內容修改後的更新策略。
若要協助搜尋引擎檢索低涉入網站，應將核心內文放入初始 HTML。對公開內容而言，靜態生成和 CDN 的 HTML 快取很有用。不過，光是達成 TTFB 0.8 秒，並不能保證出現在搜尋結果中。
TTFB 數值的依據是 2025 年 11 月 18 日更新的 web.dev 文件。
## 低涉入網站應先確認的技術條件
本文所指的低涉入網站，是讓使用者快速查閱所需資訊的網站。算繪與傳輸速度是這類網站的技術檢查項目。不過，僅憑這兩項，無法完整解釋搜尋曝光上的差異。
檢索是機器人擷取頁面的過程。建立索引則是將擷取到的內容處理為搜尋對象的過程。Google 說明，並非所有檢索到的頁面都會納入索引。[Google 檢索預算指南](https://developers.google.com/crawling/docs/crawl-budget)
| 檢查項目 | 確認內容 | 要解決的問題 |
| --- | --- | --- |
| 初始 HTML | 回應是否包含標題與核心內文 | 必須額外執行程式才能讀取內文 |
| 算繪 | 執行 JavaScript 後，內容是否正常顯示 | 因執行錯誤或封鎖而遺漏內容 |
| TTFB | 第一個回應抵達所需的時間 | 連線與伺服器回應的延遲 |
| HTML 快取 | 是否在 CDN 重複使用公開文件 | 重複向來源伺服器請求的成本 |
| 索引狀態 | Google 如何處理該 URL | 混淆檢索成功與納入搜尋索引的問題 |
## 為什麼 React 頁面看起來是空白 HTML
React 頁面的初始 HTML 會依實作方式而有所不同。在瀏覽器中產生內文的方式稱為 CSR。採用這種方式時，第一個回應可能不含內文，只有供執行的程式碼。
Google 會使用 Chromium 執行 JavaScript。頁面在檢索後，可能需要等待算繪。遭封鎖的頁面或檔案可能不會進行算繪。也不是所有機器人都會執行 JavaScript。[Google JavaScript SEO 基本指南](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
因此，不要只因畫面正常，就判斷檢索狀態正常。請先確認初始回應是否含有內文。Google 算繪後的結果，可透過 Search Console 的 URL 檢查查看。
## 靜態生成與伺服器端算繪比較
可以依公開內文的更新方式，選擇 HTML 的生成方法。靜態生成是在收到請求前產生 HTML。伺服器端算繪則是在收到請求時，由伺服器產生 HTML。React 也能採用這些方式。[web.dev 算繪方式指南](https://web.dev/articles/rendering-on-the-web)
| 方式 | 產生 HTML 的時機 | 適合考慮的情境 | 維運上應確認的事項 |
| --- | --- | --- | --- |
| 用戶端算繪 CSR | 在瀏覽器中執行 JavaScript 時 | 使用者操作較多的畫面 | 顯示內文前所需的程式執行與請求 |
| 靜態生成 SSG | 建置或產生內容時 | 向訪客顯示相同內容的公開文件 | 修改後的重新生成與部署 |
| 伺服器端算繪 SSR | 處理頁面請求時 | 每次請求都組合最新內容的畫面 | 資料查詢與 HTML 生成時間 |
| 預先算繪 | 部署前執行應用程式以取得 HTML 時 | 預先提供現有應用程式的初始內文時 | 後續功能所需的 JavaScript |
靜態生成與 CDN 的作用不同。靜態生成是關於何時產生 HTML 的選擇。CDN 則是傳送與重複使用內容的架構。由伺服器產生的 HTML，只要符合條件，也可以快取至 CDN。
## TTFB 0.8 秒代表什麼？
TTFB 是從開始導覽至頁面，到收到回應的第一個位元組之間的時間。web.dev 對大多數網站提出的大致目標是 **0.8 秒以下**。這與整個頁面顯示完成所需的時間不同。TTFB 本身也不是 Core Web Vitals 的項目。[web.dev TTFB 說明](https://web.dev/articles/ttfb)
TTFB 也包含伺服器內部處理以外的延遲。DNS 查詢是找出網域連線位址的過程。建立 TCP 和 TLS 連線也可能需要時間。將網址導向其他位置的重新導向，同樣會造成影響。
- DNS 查詢與連線準備時間
- 請求與回應經由網路傳輸的時間
- 來源伺服器查詢資料與產生 HTML 的時間
- 收到第一個回應前發生的重新導向時間
不能只因伺服器位於首爾，就斷定會超過 0.8 秒。結果會因連線位置及是否重複使用連線而異。Google 的檢索器主要使用美國 IP 位址。不過，也可能從其他國家的 IP 位址連線。[Google 檢索器技術特性](https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en)
持續的回應延遲會影響 Google 的檢索容量。伺服器錯誤也會導致檢索量下降。不過，並沒有超過 0.8 秒一次就會停止檢索的規則。頁面品質與更新頻率也會影響檢索需求。[Google 檢索預算指南](https://developers.google.com/crawling/docs/crawl-budget)
## 為什麼應確認 CDN 的 HTML 快取
Cloudflare CDN 預設不會快取 HTML。即使圖片或 CSS 已快取，仍須另外確認內文文件。其他 CDN 的預設行為，請查閱該服務的文件。
> Cloudflare CDN 預設不會快取 HTML 或 JSON。
>
> Cloudflare，預設快取行為
這句話表示 HTML 和 JSON 並非預設的快取對象。公開 HTML 可以透過 Cache Rules 納入快取範圍。回應標頭和 Cookie 等條件，也會影響是否實際儲存。[Cloudflare 預設快取行為](https://developers.cloudflare.com/cache/concepts/default-cache-behavior/)
快取是重複使用已儲存回應的功能。並不是接上 CDN 後，所有文件就會立即複製到全球各地。Cloudflare 會在處理請求的資料中心快取內容。若快取中沒有所請求的內容，可能需要向來源伺服器查詢。[Cloudflare 快取入門指南](https://developers.cloudflare.com/cache/get-started/)
對公開 HTML 套用快取規則時，請排除個人化頁面。Cloudflare 警告，快取動態 HTML 可能會將他人的資訊傳送出去。請勿快取登入或帳戶頁面。[Cloudflare Cache Everything 注意事項](https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/)
## 依頁面條件決定快取的套用標準
決定快取範圍時，應先看是否向訪客顯示相同內容。公開說明文字適合共用及重複使用。內容會隨登入狀態改變的回應，則必須另外處理。
| 頁面條件 | 可考慮的配置 | 應一併確認的事項 |
| --- | --- | --- |
| 向訪客提供相同的說明文字 | 靜態生成與公開 HTML 快取 | 修改後重新生成及更新快取 |
| 公開內文包含經常變動的數值 | 分開處理內文與變動資料的更新方式 | 數值的基準時間與失敗時的顯示方式 |
| 需要請求當下的最新公開資訊 | 考慮伺服器端算繪與條件式快取 | 可接受的資訊延遲 |
| 登入、帳戶、付款畫面 | 排除於共用 HTML 快取之外 | 驗證 Cookie 與個別使用者的回應 |
| 提供不同語言的公開文件 | 各語言的 URL 與各文件的快取 | 譯文連結與各語言的更新 |
稍後再載入即時資料，較容易保留靜態內文。不過，不要將搜尋所需的核心內容全部延後載入。這可能與提供初始 HTML 的目的相衝突。
## 常見錯誤與確認標準
只憑技術名稱或設定畫面判斷結果，很容易漏掉錯誤。請一併確認實際 HTML 與回應標頭。以下是必須區分的狀態。
| 常見判斷 | 應確認的標準 |
| --- | --- |
| 搜尋機器人無法讀取 React 網站 | 初始 HTML 與 Google 的算繪結果 |
| TTFB 為 0.8 秒，畫面就已全部顯示 | 第一個回應之後，到內文顯示所需的時間 |
| 已接上 CDN，所以 HTML 也已快取 | HTML 請求的快取狀態 |
| 靜態檔案一定是最新內容 | 最後生成時間與已部署的內容 |
| 回應迅速，就代表已完成搜尋索引登錄 | Search Console 的索引處理狀態 |
| 以一次快取命中結果判斷全球速度 | 依連線地區及快取是否命中區分的測量結果 |
Cloudflare 的 `CF-Cache-Status` 是顯示快取狀態的標頭。`HIT` 表示在快取中找到了回應。`MISS` 表示請求當下快取中沒有，因此從來源取得。`DYNAMIC` 則表示未被視為快取對象。[Cloudflare 快取回應說明](https://developers.cloudflare.com/cache/concepts/cache-responses/)
## 內容修改後的快取更新
使用靜態檔案與 CDN 快取時，也必須設計好如何讓修改內容生效。即使已修改來源，只要舊快取仍在，就會傳送舊內容。若同時發布 HTML 與 JSON，也必須讓兩種格式的內容保持一致。
以下是同時維護文件與資料檔案時的檢查順序。
1. 在原始資料中確認變更內容。
2. 使用同一份修改版本，重新生成 HTML 與資料檔案。
3. 部署新檔案後，更新已變更 URL 的快取。
4. 重新請求各個 URL，確認修改內容是否一致。
Cloudflare 建議依 URL 清除快取。清除快取是移除已儲存回應的作業。重新產生靜態 HTML 則需要另外執行。因此，請將檔案生成與快取更新整合至同一套部署程序。[Cloudflare 清除快取指南](https://developers.cloudflare.com/cache/how-to/purge-cache/)
請依內容可容許的資訊延遲設定更新間隔。說明文字與即時數值不必採用相同週期。光靠縮短快取有效期限，無法解決所有更新問題。
## 多語言網站的 hreflang 標準
`hreflang` 是連結相同內容之不同語言、地區網址的資訊。它並不是產生譯文的功能，而是協助 Google 為訪客找出適當的語言版本。
| 實作位置 | 標示方式 | 選擇時應確認的事項 |
| --- | --- | --- |
| HTML | 在文件的 `head` 中標示替代語言連結 | 是否能在各頁面範本中管理 |
| HTTP 標頭 | 在回應的 `Link` 標頭中標示 | 是否能在伺服器端管理標頭 |
| 網站地圖 | 在網站地圖中標示各語言 URL 的關係 | 是否能統一管理文件清單 |
Google 對這些方法一視同仁。因此，並非只能放在 HTML 中。每份語言文件都應標示包含自身在內的替代語言文件。也請確認互相對應頁面之間的連結。[Google 多語言頁面指南](https://developers.google.com/search/docs/specialty/international/localized-versions)
## 部署結果的確認順序
部署後，請分別驗證內文傳送與快取運作。記錄速度測量值時，請一併留下測量地區與快取狀態。依下列順序確認，較容易區分問題所在。
1. 在瀏覽器開發人員工具中確認 HTML 文件回應。查看回應是否包含核心內文。
2. 在 Search Console 的 URL 檢查中確認算繪後的 HTML。也請另外檢查實際的索引處理狀態。
3. 確認 HTML 回應的快取標頭。在 Cloudflare 中，請查看 `CF-Cache-Status`。
4. 從主要連線地區測量同一份文件。請區分未命中快取與命中快取的請求。
5. 修改內容後，確認更新結果。也請檢查登入頁面是否已排除於快取之外。
Cloudflare 警告，過度快取動態 HTML 可能導致登入功能失效。請勿快取登入表單與已驗證的頁面。修改後，也請確認驗證 Cookie 是否仍保留。[Cloudflare 登入問題指南](https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/)
## 交給 AI 編碼的實作條件
向 AI 提出要求時，除了技術名稱，也請要求可驗證的結果。明確列出初始 HTML 的內容與快取排除範圍，是實用的做法。以下文字是建立公開知識頁面時的請求範例。
```text
請將公開知識頁面的核心內文納入初始 HTML。
公開文件請優先考慮靜態生成。
請另外說明變動資料的更新方式。
請確認 CDN 是否已對 HTML 套用快取。
請將登入、帳戶、付款頁面排除於共用快取之外。
內容修改時，請將靜態檔案重新生成與快取更新串接起來。
若有多語言頁面，請設定 hreflang 連結。
請提供確認初始 HTML、快取狀態及修改是否生效的方法。
```
## FAQ
### 低涉入網站一定要用特定框架製作嗎？
不一定要使用特定框架。請確認主要內文是否包含在初始 HTML 中，也應一併檢視公開內容的快取與更新方式。
### Google 不會執行 JavaScript 嗎？
Google 會透過 Chromium 執行 JavaScript。不過，等待算繪的時間與遭封鎖的資源可能影響處理。將內文放在初始 HTML 中，可以減少對額外執行作業的依賴。
### 用 React 製作的網站也能靜態生成嗎？
React 也能生成靜態 HTML，並支援在伺服器上產生 HTML 的方式。不能只憑是否使用 React，就判斷初始 HTML 的內容。
### TTFB 不超過 0.8 秒，就表示頁面已完全載入了嗎？
TTFB 是第一個回應位元組抵達前所需的時間。圖片下載與畫面建構可能在那之後仍持續進行，應與整個頁面的載入時間區分。
### TTFB 超過 0.8 秒，就會被 Google 搜尋排除嗎？
0.8 秒是 web.dev 提出的大致效能目標，並不是超過就會被搜尋排除的規則。持續的回應延遲與伺服器錯誤可能影響檢索容量。
### 使用韓國伺服器會對全球性網站不利嗎？
距離較遠的訪客可能遇到網路延遲。不過，不能只憑位置就斷定具體的回應時間。請依據主要造訪地區的實際測量值判斷。
### 接上 Cloudflare 後，HTML 也會自動快取嗎？
Cloudflare CDN 預設不會快取 HTML 和 JSON。請確認要套用於公開 HTML 的 Cache Rules。套用規則後，應透過回應標頭檢查實際快取狀態。
### CDN 快取中沒有的首次請求也一定很快嗎？
快取中沒有的請求，可能需要從來源伺服器取得回應，因此延遲時間可能與快取命中的請求不同。請分別測量這兩種狀態。
### 登入頁面也可以套用 HTML 快取嗎？
請勿快取登入頁面與經身分驗證的 HTML。Cloudflare 警告，過度快取可能導致登入功能異常，也有將個別使用者的資訊傳給其他訪客的風險。
### 修改靜態網站的文章後，仍顯示舊內容時該怎麼辦？
請先確認新的 HTML 是否已生成並部署，再更新已變更 URL 的 CDN 快取。只清除快取並不會重新生成靜態檔案。
### hreflang 只能放在 HTML 中嗎？
Google 支援 HTML、HTTP 標頭與網站地圖這三種方式。在 Google 看來，這三種方式是等效的。請選擇方便維護的方式，並一致地維持各語言版本之間的連結關係。
### 即使網站很小，也需要重點管理檢索預算嗎？
Google 的檢索預算指南主要針對規模大且經常更新的網站。如果頁面不多，請先從更新網站地圖與查看索引報告開始。若有伺服器錯誤或內文缺漏，請優先解決這些問題。
## Sources
- [Google Search Central：瞭解 JavaScript SEO 基礎知識](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [web.dev：網頁算繪](https://web.dev/articles/rendering-on-the-web)
- [web.dev：首位元組時間（TTFB），2025年11月18日更新](https://web.dev/articles/ttfb)
- [Google：Google 檢索器與擷取工具總覽](https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en)
- [Google：最佳化檢索預算](https://developers.google.com/crawling/docs/crawl-budget)
- [Cloudflare：預設快取行為](https://developers.cloudflare.com/cache/concepts/default-cache-behavior/)
- [Cloudflare Cache：開始使用](https://developers.cloudflare.com/cache/get-started/)
- [Cloudflare：快取層級（快取所有內容）](https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/)
- [Cloudflare 快取回應](https://developers.cloudflare.com/cache/concepts/cache-responses/)
- [Cloudflare：清除快取](https://developers.cloudflare.com/cache/how-to/purge-cache/)
- [Cloudflare：動態內容與登入問題](https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/)
- [Google Search Central：告知 Google 網頁的在地化版本](https://developers.google.com/search/docs/specialty/international/localized-versions)
## Images
