Ssr Hydration Scraping

SSR Hydration Data Scraping

症状 (Symptoms of Brittle DOM Scraping)

• 爬虫经常因为前端 CSS Modules 或 Styled Components 的随机 Hash 类名（如 class="sc-fHeRUl"）变化而大面积失效。
• 难以准确遍历 DOM 树内嵌的复杂状态（如下拉加载更多、未渲染的图集等）。

根本原因 (Root Cause)

现代前端框架（React, Vue, Solid）在使用服务端渲染（SSR）时，为了在客户端“注水”（Hydration），通常会将首屏所需的完整甚至包含下一页数据的 JSON 序列化并挂载在 HTML 的 <script> 标签内。 直接提取这段纯净的 JSON 结构比解析混合了展示逻辑的 DOM 要稳定和高效得多。

代码解决方案 (Solution)

1. 定位 SSR 数据块

使用正则表达式全局提取目标脚本标签中的 JSON 字符串。

import re
import json

def extract_ssr_data(html: str) -> dict:
    # Next.js
    next_match = re.search(r'<script id="__NEXT_DATA__" type="application/json">(.*?)</script>', html, re.DOTALL)
    # Nuxt.js / Vue
    nuxt_match = re.search(r'window\.__NUXT__\s*=\s*({.*?});', html, re.DOTALL)
    # 通用 Initial State
    init_match = re.search(r'window\.__INITIAL_STATE__\s*=\s*({.*?});', html, re.DOTALL)

    if next_match:
        return json.loads(next_match.group(1))
    elif nuxt_match:
        return json.loads(nuxt_match.group(1))
    elif init_match:
        return json.loads(init_match.group(1))
    return {}