node.js - 如何配置 Puppeteer 以正确呈现外部 JS 页面？仅适用于本地主机 URL

Question

我正在尝试为外部 Javascript 页面配置服务器端呈现。我为此目的使用 Puppeteer，当我提供任何外部 URL(不是本地主机页面)时，Puppeteer 仅获取 URL 的源代码(您可能会在请求页面的查看源模式中看到的内容)，而不会呈现整个 DOM .当我尝试 SSR 任何本地主机 Javascript 页面 URL(由我本地主机上的同一 Node js 服务器生成的页面)时，一切正常。

请告知我是否遗漏了什么或者我需要尝试另一种方法。

我设法在我的本地主机上配置了 puppeteer，如下所示:

目前“html”变量仅返回获取的 URL 的源代码，我需要接收所请求 URL 的完全呈现的 DOM。

server.js 中的代码

var puppeteer = require('puppeteer');

async function ssr(url) {
  console.info('rendering the page in ssr mode');
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();

  try {
    await page.goto(url, {waitUntil: 'domcontentloaded'});
  } catch (err) {
    console.error(err);
    throw new Error('page.goto/waitForSelector timed out.');
  }

  const html = await page.content();
  await browser.close();
  return {html};
}

module.exports = ssr;

app.js 中的代码

var err = require('http-errors');
var express = require('express');
var path = require('path');
var ssr = require('./ssr.js');

var app = express();

app.listen(3000, function(){ console.info('Server listening on port '); });

app.use('/index/', async(req, res) => {
  const { html } = await ssr(`www.example.com`);
  return res.send(html);
});

Answer 1

问题很可能是您没有给页面足够的时间来呈现 DOM 内容。 {waitUntil: 'domcontentloaded'} 只会等待 DOMContentLoaded事件，不适用于任何 AJAX 请求或 DOM 修改。

尝试使用'networkidle0' 或'load' 作为page.goto 的waitUntil 值函数代替。

如果这不起作用，您有两个选择:

• 使用 await page.waitFor(1000) 为页面提供固定的时间来呈现页面
• 使用await page.waitForSelector(/* ... */)在调用 page.content() 之前等待特定的选择器被加载。这样您就可以确保您感兴趣的文档部分已加载。