Блог

Я пытаюсь настроить рендеринг на стороне сервера для внешних страниц Javascript. Я использую Puppeteer для этой цели, и когда я предоставляю любой внешний URL (не страницы локального хостинга), Puppeteer извлекает только исходный код URL-адреса (то, что вы можете увидеть в режиме просмотра исходного кода запрашиваемой страницы), без отображения всего DOM. Когда я пытаюсь SSR любой URL-адрес страницы localhost Javascript (страница, сгенерированная тем же узловым js-сервером на моем локальном хосте) — все работает нормально.

Пожалуйста, сообщите, не упускаю ли я чего-либо или мне нужно попробовать другой подход.

Мне удалось настроить puppeteer со всеми зависимостями от моего локального хостинга, как показано ниже:

В настоящее время переменная ‘html’ возвращает только исходный код выбранного URL-адреса, мне нужно получить полностью отображенный DOM запрошенного URL-адреса.

Код в 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);
});
  

Проблема, вероятно, в том, что вы не даете странице достаточно времени для отображения содержимого DOM. {waitUntil: 'domcontentloaded'} будет ожидать только события DOMContentLoaded, а не каких-либо AJAX-запросов или модификаций DOM.

Попробуйте вместо этого использовать 'networkidle0' or 'load' в качестве waitUntil значения функции page.goto.goto.goto.

Если это не сработает, у вас есть два варианта:

• Дайте странице фиксированное количество времени для отображения страницы с помощью await page.waitFor(1000)
• Используйте await page.waitForSelector(/* ... */) , чтобы дождаться загрузки определенного селектора перед вызовом page.content() . Таким образом, вы можете убедиться, что интересующие вас части документа загружены.

попробуйте

 const html = 'what ever you selector is but since you want the html just type in "html"'; 

let gg = await page.evaluate((sel) => {
        let element = document.querySelector(sel);
        console.log ('got Boom');
        return element? element.innerHTML: null;
    }, html);


    console.log (gg);