在日常生活中，我們經常滑IG、Threads等社群平台時，總會看到許多好吃好玩的店家，想要把餐廳、咖啡廳或特色小店的資訊都蒐集起來，但手動整理很花時間。今天呢，就是要用 Firecrawl 爬取Threads網頁內容，透過 AI 整理文字，最後自動存到 Notion，打造完全自動化的探店資料庫。

什麼是SSR CSR

• SSR（Server-Side Rendering，服務端渲染）
  • 概念
    • 頁面內容在服務(伺服器端)生成，直接把完整 HTML 傳給瀏覽器。
    • 瀏覽器拿到的 HTML 已經包含完整資料，可以立即呈現頁面。
  • 特點
    • 初始頁面載入快
    • 搜索引擎友
    • 可用http request來抓取內容
  • 優點
    • SEO 效果好
    • 首屏渲染快，用戶體驗較佳
  • 缺點
    • 伺服器負擔大，需要每次請求都渲染 HTML
    • 互動性較差，還需要前端 JS 來增加動態效果
  • 舉例
    • Google 搜尋結果頁、新聞網站
• CSR（Client-Side Rendering，客戶端渲染）
  • 概念
    • 頁面內容主要在瀏覽器端生成，因此我們會先看到loading的畫面。
    • 初始網頁請求只會拿到一個最小化的 HTML 框架，之後由 JavaScript 動態載入資料，渲染完整頁面。
  • 特點
    • 瀏覽器負責把資料渲染成頁面
    • 常用於 單頁應用（SPA），像 React、Vue、Angular
  • 優點
    • 用戶操作流暢，頁面切換速度快
    • 前端開發彈性大
  • 缺點
    • 首次載入較慢（因為要先下載 JS 才能顯示內容）
    • 對 SEO 不友善（搜索引擎抓取內容可能不完整）
  • 舉例
    • Instagram 網頁版、Gmail、Google Docs

💡Firecrawl是一個工具可以很輕鬆的抓取客戶端渲染的內容，且可以把爬取的內容變成適合讓AI讀取的資料(Markdown語法)

實作時間

1. 建立Manual Trigger 節點

2. 前往Threads網頁，搜尋想要的內容後複製URL

3. 前往firecrawl進行註冊，取得API

4. 建立firecrawl節點 功能選用scrape a url and get its content

   1. 設定credential、URL放入第二步所複製的Threads 網址
   2. Wait For (Ms)設5000ms(5秒) → 開啟網頁後等待讀取的時間
   3. Timeout (Ms)設為30000ms(30秒) → 最常執行時間
      

5. 建立Gemini節點

   1. 因為抓到的資料非常的多且雜亂，因此這裡使用AI來幫忙整理，希望只留下店名、地址、營業時間、評價、推薦餐點、摘要
   2. system prompt

專門分析Threads網頁Markdown內容的助理。使用者透過Firecrawl爬蟲取到的Threads網頁Markdown內容可能包含店名、地址、營業時間、評價、推薦餐點、其他雜訊。 你的任務是將內容整理成 JSON 格式，JSON 欄位包含：

• storeName: 店名（必填）
• address: 地址（如果有）
• hours: 營業時間（如果有）
• rating: 評價（如果有）
• recommend: 推薦餐點或特色（如果有）
• summary: 100 字以內的簡短摘要

⚠️ 輸出規則：

• 只能輸出 JSON，不能加任何文字或解釋
• 不要使用 markdown 格式 (不要加 ```json 或 ```)
• 如果某個欄位沒有資訊，請回傳空字串 ""

6. 建立code節點

   1. 因為現在的內容為markdown 格式，但接下來要把資料整理成適合 Notion Database 的欄位結構，因此需要轉成JSON。這裡使用Chat GPT幫忙生成程式碼

   // 取得 Gemini 節點輸出的文字
   let text = $input.first().json.content.parts[0].text || "";
   
   // 移除前後空白、markdown 區塊符號（若有）
   text = text.trim().replace(/```json/g, "").replace(/```/g, "");
   
   // 嘗試解析 JSON
   let data;
   try {
       data = JSON.parse(text);  // 轉成 JSON 陣列
   } catch (e) {
       // 解析失敗，回傳原始文字以供排錯
       return [{ error: "JSON parse 失敗", raw: text }];
   }
   
   // 遍歷每筆資料，做簡單預設
   data.forEach(item => {
       item.storeName = item.storeName || "";
       item.address   = item.address || "";
       item.hours     = item.hours || "";
       item.rating    = item.rating || "";
       item.recommend = item.recommend || "";
       item.summary   = item.summary || "";
   });
   
   // 回傳給下個節點（Notion）
   return data;
   
   

7. 前往Notion建立一個database，並設定好欄位(店名、地址、營業時間、評價、推薦餐點、備註)

8. 建立Notion節點，功能選用Create a database page

   1. 將每一欄位的對應值放入
      

成果

透過今天的練習，成功建立了一個 從爬取網頁 → AI 整理 → 自動存入 Notion 的自動化流程。

資料來源

https://youtu.be/w02WAdbwKj0?si=G-UI-SjRzzrBmK2I
https://www.firecrawl.dev/