TikTok Shop 商品页数据结构解析 —— 从 SSR 到结构化 JSON

要读懂一个商品页里到底有哪些结构化数据、它们是怎么组织的。这篇拿 TikTok Shop 的商品详情页做样本，纯技术角度拆一拆：数据藏在页面的哪个位置、按什么结构组织、怎么解析成一份干净的 JSON。

只摆事实和结果。文末附一份真实商品的解析产物。

一、数据藏在哪：SSR 里的一段 JSON

TikTok Shop 的商品详情页是服务端渲染（SSR）的。用浏览器加载页面后，商品的核心数据并不在那些花哨的 DOM 节点里，而是被服务端序列化进了页面的一段内联 JSON：

<script id="__MODERN_ROUTER_DATA__" type="application/json"> … </script>

这是 ModernJS 框架的路由数据。商品详情就嵌在它内部的一个字符串化 JSON blob（需要二次 JSON.parse）里。

一个容易踩的点：商品页加载时会打一个很显眼的 api/shop/pdp_desktop/page_data 接口，响应有 2.8MB 之大。第一反应会以为主商品数据在这里——其实它只是"猜你喜欢/店铺其他商品"的推荐位（两个 feed_list 组件），主商品压根不在里面。盯错了能白忙半天。真正的主商品在上面那段 SSR blob 里。

二、数据怎么组织：规格、SKU 与价格是分开的

解析出那段 blob，主商品对象的结构很清晰：

• name —— 标题
• images —— 主图（800px webp，CDN 直链）
• sale_properties —— 规格维度，比如 Color / Materials，每个维度带若干取值（有的取值还自带一张图）
• skus —— 规格组合，每个 SKU 通过 property_pairs 指向它属于哪几个规格值（如 Color=black × Materials=iPhone 11）
• 价格 —— 单独一份 sku_id → 价格 的映射，不在 skus 对象里

值得注意的是价格和商品结构是分离的：商品结构（规格、库存、包装尺寸）走 SSR，价格是另一份按 sku_id 索引的表（含 min_price / max_price）。这种"结构与价格分离"的设计，多半是为了价格能独立刷新、做个性化。

三、取价：字段语义要选对

这里有个数据字段语义上的细节，做成本核算时很关键：

商品页显眼位置那个 “from S$1.96”，对应的是 product_price_info / min_price——它绑定的是最便宜那个规格的价格，是一个"起步价"展示值。

而实际上 100 个规格组合里，大多数 SKU 是 S$2.36，只有个别便宜规格是 1.96。

也就是说，如果直接取那个"起步价"当商品价，会系统性低估成本。正确做法是：按你实际要对标的那个规格组合，去价格映射里取它对应 sku_id 的价。字段选错，成本就算歪了。

这不是什么玄学，就是读懂字段语义：min_price 是展示用的起步价，per-SKU 价才是每个规格的真实价。

四、结果

一个真实商品（MagSafe 手机壳，已售 1.4 万件）的商品页：

左上 -30% S$1.96（起步价），右侧 Color（5 色）× Materials（20 机型）就是两个规格维度。

解析成结构化 JSON（截取）：

{
"title": "Luxury Matte Magsafe Wireless Charging Phone Case For iPhone 11–16 Pro Max…",
"sold_count": 14144,
"images": [ "…9 张 800px 高清主图…" ],
"sale_properties": [
{ "name": "Color", "values": ["black","blue","pink","purple","Clear"] }, // 5 种
{ "name": "Materials", "values": ["For iPhone 11", … 20 种机型 ] }
],
"price_range": { "min": 1.96, "max": 2.36, "currency": "S$" },
"sku_count": 100,
"skus": [
{ "spec": {"Color":"black","Materials":"For iPhone 11"}, "price": {"sale":"2.36","origin":"3.37"}, "stock": 19994 },
…共 100 个规格组合, 每个带独立售价 + 库存…
]
}

5 色 × 20 机型 = 100 个规格组合，每个的售价、原价、库存都能解析出来。 这正是选品做成本核算、对标货源需要的粒度。

五、这套解析对各品类通用

同一套解析逻辑，在不同品类的商品页上都成立——只是规格维度的名字随品类变：

所以下游做匹配时，要按"维度的语义"（颜色/尺码/机型）去对齐，而不是写死字段名。

小结

• TikTok Shop 商品详情在页面 SSR 的 __MODERN_ROUTER_DATA__ 里；那个 2.8MB 的 page_data 接口是推荐位、不是主商品。
• 商品结构（规格 / SKU / 库存）和价格（sku_id → price 映射）是分开存的。
• 取价要读懂字段语义：min_price 是展示起步价，per-SKU 价才是每个规格的真实价，成本核算别用错。
• 解析逻辑跨品类通用，规格维度名按语义对齐。

交流 各类电商平台数据

• 微信：NarraData