影片連結：https://www.youtube.com/watch?v=3-L9agG_cKA
YouTube 頻道：https://www.youtube.com/c/kaochenlong

在抓網路資料的三部曲裡面，我們第一集介紹怎麼樣去抓 JSON、RSS 這種比較有結構的資料，算是比較簡單的操作。第二集介紹怎麼樣從頁面把 HTML 的原始資料透過 CSS 選取器的把資料抓出來。不管是哪一種，取得資料後後面的處理就都差不多。

但今天這一集要跟大家介紹的，這個比較麻煩一點點。

什麼是動態生成的資料？

麻煩的點就在於頁面資料是動態生成的。動態生成什麼意思？我用大家可能比較熟悉的蝦皮網站來舉例。蝦皮網站有很多商品資料，看起來內容很豐富。如果你用瀏覽器的「檢查元素」功能（按右鍵選檢查），跟我們在第二集做的一樣，你會發現網頁的確有內容，有產品名稱之類的資訊在 HTML 結構裡面。但是如果你換個方式，按右鍵選擇「檢視原始碼」，就會發現不同的結果。檢視原始碼跟檢查元素是不一樣的：

• 「檢視原始碼」是看伺服器傳送的原始 HTML 碼
• 「檢查元素」則是看瀏覽器渲染後的結果

當你打開檢視原始碼之後，會看到一大堆 JavaScript 程式碼。但再往下捲動就會發現，剛剛在檢查元素中看到的那些產品名稱都不見了！原始碼裡面沒有那些商品資料，只有程式碼。最後你會發現，整個 HTML 結構只有兩個 div 標籤而已。

如果上面那一大串 JavaScript 程式碼不算的話，這個整個網頁的本質就真的只有這麼一點點內容。所以如果我們用那個藍色地球，用 HTTP request 那個節點來抓資料的時候，你會發現你只抓到這個，然後，啪！沒了。

可是為什麼頁面上那麼多的資料出來？明明就有看到其它內容不是嗎？這是因為，現在在現代很多的網站應用程式，他們都是先給你看到這個頁面，然後在背後有一些厲害的框架，去幫你把這些圖啊、字啊，渲染出來給你看。藍色地球其實不是真的瀏覽器，它只是一個 HTTP request，就跟網站說「來，給我」，拿了就走了。

解決方案：Headless Browser

偏偏蠻多電商是用這種動態的方式來產生資料的，我們想辦法來處理這個問題...

之所以會抓不到資料，不是真的抓不到，而是頁面資料還沒有生出來。因為要在瀏覽器裡面才可以渲染那些程式語法才可以讓你看到東西，好，那我就給你一個瀏覽器。

問題是，n8n n8n 本身就是網頁應用程式而已，哪裡來的瀏覽器？。這裡要跟大家介紹個名詞叫做 Headless Browser，它是一個「沒有頭」的瀏覽器。什麼叫沒有頭？不是真的沒有頭，這表示它有瀏覽器的功能，但是沒有瀏覽器的界面。

也就是說，我會請 n8n 跟這個沒有頭的瀏覽器說：「欸，你幫我去蝦皮抓資料！」，抓回來之後會像一般瀏覽器一樣進行渲染、生出應該有的內容，然後再交還給 n8n，所以最終我們就能得到瀏覽器渲染完成的結果，大概可以這樣理解。

這其中有不少細節，但是我們先大概知道說這個沒有頭的瀏覽器在做什麼事就好。

Browserless.io

目前在市面上有蠻多工具都可以做到這件事情。有 Puppeteer 或是 Playwright。這些都不錯，不過我自己最後在 n8n 更常用 Browserless.io 這個網站或工具。

Browserless.io 可以幫我們把資料爬回來，這個網站本身就是提供 Headless Browser 服務，我們提供網址給它，然後他就可以幫我們把渲染後的內容抓回來。Browserless.io 有付費服務，可以在他們網站的 pricing 頁面看到收費標準。同時，這個專案也是開源的，你可以用 Docker 自己架設。

在 Zeabur 上架設 Browserless

如果你有辦法的話，你可以在你自己電腦本機把這個 Browserless 裝起來，成本就相對低很多。但如果說不知道該怎麼架，或者是說本地沒有使用 Docker，又剛好也跟我一樣是用遠端的 Zeabur 的話，沒關係，Zeabur 本身也有提供現成的模板，可以一鍵安裝。

為了方便管理，我就直接裝在同一個專案裡。操作方式如下：

點擊「建立服務」，會出現兩個選項：從 GitHub 部署或是從模板部署。我們選擇從模板部署比較簡單，因為 Zeabur 已經幫我們處理好相關設定了。

選擇模板後，在搜尋框輸入 "browserless"，會找到 Browserless 模板，選擇它然後點 Deploy 開始部署。部署完成後，Browserless 服務會出現在左側的服務列表中，部署過程可能需要幾分鐘時間，等到服務狀態變成綠色（表示運作中）就可以使用了。

設定 Browserless

Browserless 要怎麼使用？它是一個中介工具，我們的 n8n 要跟 Browserless 說：「請你幫我抓取某個網頁的內容」，因此 Browserless 可能會需要一個可以存取的網址。在 Browserless 服務的設定頁面，有一個 "Add Domain" 的選項，我們可以在這裡設定網址。設定好網址後，我們就可以開始使用這個服務了。

我設定子網域名稱為 "hellokitty"，所以完整網址會是 https://hellokitty.zeabur.app。請不要使用跟我一樣的名稱，因為每個子網域名稱都是唯一的。

設定完成後點擊確認綁定，通常幾分鐘內就會綁定成功。如果綁定一直失敗，可以試著移除網域設定後重新加一次。

重要：取得 Browserless Token

知道網址了，再來要怎麼用？這裡有個重要東西就是 Browserless Token。你應該不會希望架好服務後，別人也可以免費使用你的 Browserless 服務。畢竟使用量會計入你的帳單，這樣不太好。這時候就需要用到這個 token，它就像是一把金鑰，只有持有 token 的人才能使用服務。

有了網址和 token 這兩個資訊，我們就可以在 n8n 中使用 Browserless 服務了。

在 n8n 中設定 HTTP Request

回到 n8n 的工作流頁面，我們要修改 HTTP Request 節點的設定。這次不是直接抓取目標網站，而是要請求 Browserless 服務。

這一次，HTTP Request 的 URL 要填入 Browserless 的網址，而不是目標網站的網址。因為我們是要請 Browserless 服務幫我們去抓取目標網站的內容。流程是：我們告訴 Browserless「請你幫我去抓某個網址的內容」。

這個服務就像一個代理，幫我們轉一手。

設定請求參數

Browserless 的使用方式並不是直接貼網址，而是有特定的規格：

1. 網址格式：Browserless 服務的網址後面要加上 /content，這是他們 API 的規定。所以完整的 URL 格式是：https://hellokitty.zeabur.app/content
2. HTTP 動詞：必須使用 POST 方法，不能用 GET。
3. 認證設定：需要在 Header 中帶入 Bearer token 進行身份驗證，證明你是合法的使用者。
4. Body 內容：在請求的 Body 中要放入 JSON 格式的資料，告訴 Browserless 你要抓取哪個網站的內容。

建立認證憑證

點擊建立新的 credential，進入設定頁面。建議為這個 credential 取一個有意義的名字，這樣未來在專案中有多個認證設定時比較容易管理。例如這個是給 Browserless 用的，就取名為 "Browserless"。

在 Bearer token 欄位中，貼上剛才從 Browserless 服務複製的 token。如果忘記 token 了，可以回到 Zeabur 的 Browserless 服務頁面，在環境變數或設定頁面中可以找到這個 token。

複製 token 後貼到 Bearer token 欄位，然後點擊 save 儲存。

設定請求 Body

現在我們已經設定好 POST 方法和認證，最後一步是準備請求的 Body 內容，要告訴 Browserless 我們想要抓取哪個網站。這個資訊要放在 HTTP 請求的 Body 中，以 JSON 格式傳送。

在 HTTP Request 節點中，勾選 "Send Body" 選項，然後選擇 "JSON" 格式。在 JSON 內容區域，輸入以下格式：

{
  "url": "https://shopee.tw"
}

其中 url 是 key，後面的值就是你要抓取的目標網站網址。

測試抓取結果

設定完成！讓我們再確認一次設定：

1. Method 使用 POST
2. URL 是你的 Browserless 服務網址加上 /content
3. Authentication 選擇 Generic Credential Type 的 Header Auth
4. 建立 Bearer token credential
5. 在 Body 中放入 JSON 格式的目標網址

設定都完成了，沒有意外的話，現在應該就能成功抓到動態生成的資料了。

測試其他網站

除了蝦皮之外，其他電商網站像是 PChome 24 小時購物也是類似的設計，如果你檢視 PChome 的原始碼，會發現同樣的情況：頁面上有這麼多商品，但原始碼卻只有很少的內容，根本不可能只有幾行程式碼就能顯示這麼多商品。

我們也可以用同樣的方法來測試 PChome，把 JSON 中的 url 換成 PChome 的網址，其他設定都不用改。

既然我們已經透過 Browserless 拿到渲染後的 HTML 內容，下一步就是要解析這些資料了，但後面的這些步驟就跟我們在上一集介紹的 HTML 解析是一樣的。

總結

動態資料抓取確實比較有技術門檻，很多人遇到這種情況就不知道該怎麼處理。但是有了 Browserless 這類 Headless Browser 工具，就可以有效解決這個問題。整個流程是：

n8n
→ HTTP Request
→ Browserless 服務
→ 目標網站。

我們不是直接抓蝦皮或 PChome 的資料，而是請 Browserless 服務代抓並渲染網頁內容。拿到渲染後的 HTML 後，再用 HTML Extract 進行解析，後續流程就跟之前介紹的一樣了。

對不是工程師的人來說，這個可能比較難一點點，如果有不清楚的地方，都歡迎在文章或影片下方留言一起研討、討論。