本文详解为何 Cheerio 无法稳定读取某些 标签的 href 属性，并揭示根本原因：目标网站是基于 Next.js 的 SSR/SSG 应用，关键数据实际嵌入 的 JSON 中；直接解析该 JSON 比 DOM 抓取更准确、高效且免于结构微变导致的失效。
本文详解为何 cheerio 无法稳定读取某些 `` 标签的 `href` 属性，并揭示根本原因：目标网站是基于 next.js 的 ssr/ssg 应用，关键数据实际嵌入 `<script id="__next_data__">` 的 json 中；直接解析该 json 比 dom 抓取更准确、高效且免于结构微变导致的失效。</script>
在使用 Cheerio 进行网页抓取时，开发者常遇到“HTML 看似一致，但 .attr('href') 却返回 undefined”的问题——正如你在抓取 2dehands.be PS5 游戏列表时所遭遇的。表面看，两个 <li> 结构高度相似，且 <a></a> 标签均包含 href 属性；但 Cheerio 仍可能读取失败。这并非 Cheerio 的 Bug，而是源于页面渲染机制的本质差异。
? 问题根源：Next.js 的服务端渲染与动态 DOM 注入
2dehands.be 是一个典型的 Next.js 应用。其首页 HTML 并非纯静态模板，而是在服务端生成后，将完整业务数据序列化为 JSON，注入到一个特殊的 <script id="__NEXT_DATA__"></script> 标签中：
<script id="__NEXT_DATA__" type="application/json">
{"props":{"pageProps":{"searchRequestAndResponse":{https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c}}}, https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c}
</script>
浏览器端的 React 应用会立即消费该 JSON，动态挂载真实 DOM 节点。而 Cheerio 仅解析初始 HTML 字符串，不执行 JavaScript。因此：
- ✅ 你看到的
<a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></a>可能是服务端预渲染（SSR）生成的，此时可被 Cheerio 正确读取； - ❌ 但更多情况下，
<a></a>标签是由客户端 JS 动态插入或属性由 JS 补充（如href在useEffect中设置），此时原始 HTML 中该属性并不存在（或为空/占位符），Cheerio 自然读不到。
你的两个示例中，第一个 <a></a> 标签虽在源码中显示 href，但极可能是客户端运行时才填充的——而 Cheerio 加载的 HTML 快照中该属性尚未写入，导致 attr('href') 返回 undefined。
✅ 推荐方案：直取 __NEXT_DATA__ JSON 数据源
绕过不可靠的 DOM 层，直接解析内嵌 JSON，是更鲁棒、更高效的策略。以下是完整实现：
const axios = require('axios');
const cheerio = require('cheerio');
const url = 'https://www.2dehands.be/l/games-en-spelcomputers/games-sony-playstation-5/';
axios.get(url)
.then(({ data: html }) => {
const $ = cheerio.load(html);
const nextDataScript = $('#__NEXT_DATA__').text();
if (!nextDataScript) {
throw new Error('Failed to locate __NEXT_DATA__ script tag');
}
const nextData = JSON.parse(nextDataScript);
const { listings, topBlock } = nextData.props.pageProps.searchRequestAndResponse;
// 合并顶部推荐位（topBlock）与主列表（listings），避免遗漏
const allListings = [https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c(topBlock || []), https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c(listings || [])];
allListings.forEach((item, idx) => {
console.log({
index: idx,
title: item.title?.trim(),
url: item.vipUrl ? new URL(item.vipUrl, 'https://www.2dehands.be').href : null,
price: item.price?.value,
location: item.location?.label,
date: item.listingDate
});
});
})
.catch(err => {
console.error('Scraping failed:', err.message);
});
? 关键说明：
vipUrl是 Next.js 数据模型中真实、稳定的链接字段，比 DOM 中的href更权威；topBlock包含置顶广告或精选条目，与listings逻辑同源，建议合并处理；- 使用
new URL(https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c)安全拼接相对路径，避免手动字符串拼接出错。
⚠️ 注意事项与最佳实践
- 不要依赖 DOM 结构稳定性：Next.js 经常优化 HTML 输出（如移除冗余 class、动态添加 data-* 属性），DOM 抓取极易断裂；
-
检查
__NEXT_DATA__是否存在且可解析：部分路由可能禁用 SSR，或 JSON 被压缩/编码，需加 try-catch； -
注意反爬策略：2dehands.be 对高频请求有风控，建议添加合理
User-Agent、Referer头及请求间隔； - 替代方案（若 JSON 不可用）：启用 Puppeteer 等无头浏览器等待 JS 执行完成后再提取 DOM，但性能与资源开销显著增加；
-
法律与合规性：务必查阅
robots.txt及网站Terms of Service，尊重rate-limiting与copyright条款。
✅ 总结
当面对现代前端框架（Next.js、Nuxt、Remix 等）构建的网站时，优先寻找内嵌 JSON 数据源（如 __NEXT_DATA__、window.__INITIAL_STATE__）永远优于 DOM 抓取。它不仅规避了 JavaScript 渲染时机问题，还提供结构化、语义明确、字段丰富的原始数据，大幅提升抓取系统的可靠性与可维护性。将精力从“修复选择器”转向“解析数据模型”，才是专业爬虫开发者的进阶之道。
