為什麼 n8n 爬蟲抓不到資料？一篇搞懂「靜態」與「動態 (SPA)」網站的爬取差異

你是否在 n8n 的爬蟲旅程中，遇到過這個令人百思不解的謎團：你想抓取的網站明明在你的 Chrome 瀏覽器中顯示得好好的，有文章、有價格、有留言，但當你興奮地將網址貼到 HTTP Request 節點中，抓回來的 HTML 原始碼卻是一片「空城」？

你可能會看到一堆 <script> 標籤、一個空蕩蕩的 <div> 標籤，和你真正想要的資料完全沾不上邊。你反覆檢查了網址和 CSS Selector，一切都沒錯，但寶貴的數據就是不翼而飛。

如果你正為此所困，別擔心，你的 n8n 工作流沒有問題，你的 CSS Selector 也可能完全正確。你遇到的，是現代網頁開發中最核心的一個差異：「靜態網站」與「動態網站 (SPA)」的根本區別。

搞懂這兩者的差異，是所有爬蟲學習者從入門邁向進階的關鍵一步。這篇文章將徹底為你解惑，我們將用最簡單易懂的比喻，帶你理解兩種網站的運作原理，教你如何一眼判斷目標網站的類型，並提供兩種截然不同、但同樣強大的爬蟲策略，讓你從此無論面對什麼樣的網站，都能迎刃而解。

零基礎帶你完成屬於自己的n8n自動化流程

內容目錄

我遇到的問題：為什麼用 n8n 抓的網頁，跟我在瀏覽器看到的不一樣？

讓我們先重現一次案發現場。假設你想抓取一個電商網站的商品價格。你在 Chrome 中打開頁面，價格「NT$ 1,999」清晰可見。

於是你建立了一個 n8n 工作流：

HTTP Request 節點： URL 欄位填上該商品頁網址，Method 設為 GET。
HTML Extract 節點： 你用 Chrome 的開發者工具，找到了價格所在的 CSS Selector 是 .price-tag，並將其填入節點設定。

你滿心期待地執行流程，結果 HTML Extract 節點卻什麼也沒抓到，回傳了一個空值。你回頭去看 HTTP Request 節點抓回來的 HTML 原始碼 (body)，用 Ctrl+F 搜尋 1,999，竟然也找不到！

這究竟是怎麼回事？答案是，你和你的 n8n 爬蟲，從伺服器那裡拿到的「菜單」根本不一樣。

網頁的兩種上菜方式：靜態網站 vs. 動態網站

為了理解這個問題，你可以把瀏覽網頁的過程，想像成去餐廳點餐。

靜態網站 (Server-Side Rendering, SSR) – 傳統的「便當店」模式

傳統的靜態網站，運作方式就像去一家便當店。

你 (爬蟲/瀏覽器) 點餐： 你對伺服器發出一個請求：「你好，我要一份排骨便當（GET /page.html）。」
廚房 (伺服器) 準備： 伺服器在自己的廚房裡，將米飯、排骨、三樣配菜等所有內容，全部都準備好，放進一個便當盒（HTML 檔案）裡。
上菜 (回應): 伺服器將一個內容完整、裝配齊全的便當盒（完整的 HTML），直接交給你。

對於這種網站，n8n 的 HTTP Request 節點（你的爬蟲）和你的 Chrome 瀏覽器，拿到的便當盒內容是一模一樣的。我們之前實作的 PTT 爬蟲，就是一個典型的靜態網站案例。因為內容在伺服器端就已經生成好，所以爬蟲可以直接在 HTML 原始碼中找到所有需要的資料。

動態網站 (Client-Side Rendering, CSR / SPA) – 新潮的「自助餐」模式

現代許多網站，特別是單頁應用程式 (Single-Page Application, SPA)，運作方式則更像是去一家新潮的自助餐或 IKEA 餐廳。

你 (爬蟲/瀏覽器) 點餐： 你對伺服器發出請求。
廚房 (伺服器) 準備： 這次，伺服器不給你完整的便當。它只給你一個空的餐盤（一個極簡的 HTML 骨架）、一本操作手冊（一堆 JavaScript 檔案），和一張菜單 API 的地址。
自己動手 (瀏覽器執行 JavaScript):
1. 你的瀏覽器拿到空餐盤和操作手冊後，開始閱讀手冊（執行 JavaScript）。
2. 手冊上寫著：「請拿著這張菜單地址，去向廚房的另一個窗口（API Endpoint），要一份主菜、一份沙拉、一份飲料。」
3. 瀏覽器於是又向伺服器發出了數個額外的 API 請求。
4. 廚房的 API 窗口分別將主菜、沙拉、飲料（JSON 格式的純數據）交給瀏覽器。
5. 瀏覽器最終根據操作手冊的指示，將這些菜餚（數據）擺放到餐盤（HTML 骨架）的正確位置上，組合成了你最終看到的、豐盛的完整餐點。

現在，問題的答案揭曉了：n8n 的 HTTP Request 節點，它只是一個單純的「取餐員」，它不會閱讀那本複雜的操作手冊 (不會執行 JavaScript)。所以，當它去自助餐式的動態網站請求時，它拿到的，就只有那個空空如也的餐盤（HTML 骨架），而所有需要由 JavaScript 動態載入的菜餚（真實數據），它一樣也沒拿到。這就是你抓不到資料的根本原因。

一眼看穿！如何快速判斷一個網站是靜態還是動態？

既然有這兩種模式，我們在動手爬取前，就需要先學會如何判斷。方法非常簡單：

在 Chrome 瀏覽器中，打開你想爬取的目標網頁。
在頁面的空白處點擊右鍵，選擇「檢視網頁原始碼 (View Page Source)」。這會打開一個新分頁，顯示你的瀏覽器「第一時間」從伺服器收到的、未經任何加工的 HTML 骨架。
在這個「原始碼」分頁中，按下 Ctrl+F，搜尋你想抓取的關鍵字（例如商品價格 1,999 或文章標題的某個詞）。

如果能搜尋到： 恭喜你，這是一個靜態網站。你可以直接使用 HTTP Request + HTML Extract 的方式進行爬取。
如果搜尋不到： 那麼，這 99% 是一個動態網站 (SPA)。你需要採用接下來介紹的進階策略。

動態網站爬蟲的王道：找出背後隱藏的 API！

既然動態網站的真實數據，是由瀏覽器後續發送 API 請求才拿到的，那麼最高效、最穩定的爬蟲策略，就是「繞過網頁，直接模仿瀏覽器去呼叫那個 API！」

這種方法的好處是：

速度快： 你無需下載龐大的 HTML/CSS/JS 檔案。
數據乾淨： API 回傳的通常是結構清晰的 JSON 格式，你連 HTML Extract 節點都不需要，可以直接用 Set 節點處理，非常方便。

如何找到隱藏的 API？

在目標網頁，按下 F12 打開「開發人員工具 (DevTools)」。
切換到「網路 (Network)」分頁。
點選「Fetch/XHR」這個篩選器。這個類別專門顯示由 JavaScript 發出的 API 請求。
重新整理 (F5) 你的網頁。
現在，你會看到「Network」分頁中，列出了所有在頁面載入過程中發生的 API 請求。逐一點擊它們，並在右側的「預覽 (Preview)」或「回應 (Response)」分頁中，尋找包含了你想要數據的那個請求。
一旦找到，你就在「標頭 (Headers)」分頁中，取得了這個 API 的 Request URL、Request Method (通常是 GET 或 POST)，以及可能需要的任何請求標頭！

接下來，你只需要將這些資訊，填入 n8n 的 HTTP Request 節點，就能像瀏覽器一樣，直接從源頭獲取最乾淨的 JSON 數據。

終極武器：使用無頭瀏覽器 (Headless Browser) 解決頑固的動態網站

在極少數情況下，動態網站的 API 可能經過了加密或複雜的驗證，讓你難以直接模仿。這時，我們還有最後的終極武器：無頭瀏覽器 (Headless Browser)。

無頭瀏覽器，就是一個在伺服器背景運行的、沒有圖形介面的真實瀏覽器（例如 Chrome）。它的作用是：

像真人一樣，完整地載入網頁。
在背景執行所有的 JavaScript，等待所有 API 請求完成，將頁面「渲染」成最終的模樣。
將渲染完成後的、包含所有動態數據的「最終版 HTML」，回傳給 n8n。

n8n 可以透過整合 Browserless (一個提供無頭瀏覽器服務的平台) 或使用社群節點 (如 Puppeteer)，來實現這個功能。這種方法雖然能解決所有動態網站的爬取問題，但因為需要啟動一個完整的瀏覽器，所以資源消耗較大、速度也較慢，應作為備用方案。

總結：面對不同網站，選擇你的最佳爬蟲策略

現在，你已經掌握了應對兩種網站的爬蟲心法。讓我們總結一下你的決策流程：

第一步：偵查
- 使用「檢視網頁原始碼」大法，判斷目標是靜態還是動態網站。
第二步：選擇策略
- 如果是靜態網站 (如 PTT):
  - 使用 HTTP Request 節點直接抓取 HTML。
  - 使用 HTML Extract 節點搭配 CSS Selector 提取資料。
- 如果是動態網站 (SPA):
  - 首選策略： 打開開發者工具的 Network 頁籤，當一名「API 偵探」，找出隱藏的數據 API，並用 HTTP Request 節點直接呼叫它。
  - 備用策略： 如果 API 過於複雜難以破解，才考慮使用 Browserless 等「無頭瀏覽器」工具，來進行完整的頁面渲染後再抓取。