Node.js项目中如何实现页面动态数据加载以优化第三方请求延迟问题

核心思路是把原来服务端同步抓取第三方数据再渲染页面的逻辑拆分为两步，避免阻塞静态内容返回：

1. 服务端收到页面请求后，直接返回EJS渲染的静态页面，第三方数据展示区域先显示加载占位
2. 页面加载完成后，前端异步请求专门的数据接口拉取抓取结果，替换占位内容

服务端路由改造 #

以常用的Express框架为例，拆分两个路由：

• 页面路由：无需等待第三方抓取，直接返回渲染后的静态页面
• 数据接口路由：单独处理第三方站点抓取逻辑，完成后返回JSON格式结果

代码示例：

// 页面路由
app.get('/your-page', (req, res) => {
  res.render('your-page.ejs') // 直接渲染EJS静态内容返回
})

// 数据抓取接口
app.get('/api/third-party-data', async (req, res) => {
  try {
    // 此处替换为你原有第三方站点抓取逻辑，可搭配axios、node-fetch、cheerio等工具使用
    const fetchRes = await fetch('目标站点地址', { timeout: 10000 })
    const result = await fetchRes.json()
    res.json({ code: 0, data: result })
  } catch (err) {
    res.json({ code: 1, msg: '数据加载失败' })
  }
})

EJS模板改造 #

在EJS模板中提前写好加载占位，新增前端异步请求逻辑：

<!-- 原有静态内容直接正常渲染 -->
<header>网站头部</header>
<main>
  <div class="normal-content">其他不需要抓取的页面内容</div>
  <!-- 第三方数据展示区域，先显示加载中 -->
  <div id="third-content-wrap">
    <p>加载中...</p>
  </div>
</main>
<footer>网站底部</footer>

<script>
window.onload = async () => {
  const wrap = document.getElementById('third-content-wrap')
  try {
    const res = await fetch('/api/third-party-data')
    const result = await res.json()
    if (result.code === 0) {
      // 根据实际数据结构替换内容即可
      wrap.innerHTML = `<div>抓取到的内容：${result.data.xxx}</div>`
    } else {
      wrap.innerText = result.msg
    }
  } catch (e) {
    wrap.innerText = '数据加载失败，请稍后重试'
  }
}
</script>

• 数据抓取可使用axios、node-fetch发送请求，若需要解析HTML内容可搭配cheerio，都是Node.js抓取场景的主流工具
• 如果抓取请求频次较高，可搭配ioredis对接Redis做抓取结果缓存，相同请求无需重复访问第三方站点，进一步提升响应速度
• 若有大量抓取任务需要异步调度，可使用bullmq等任务队列工具做异步处理

内容的提问来源于stack exchange，提问作者Venkat Lohith Dasari