服务器端使用 Puppeteer 渲染 Javascript 应用程序答案

【问题标题】：Server side render Javascript App with Puppeteer服务器端使用 Puppeteer 渲染 Javascript 应用程序
【发布时间】：2019-06-27 15:21:35
【问题描述】：

我有一个 Node.js 服务器和一个要在服务器端呈现的 Javascript 应用程序。

如何使用 Puppeteer 将此 JS 应用程序呈现为 HTML 页面并将其保存为电子邮件、缓存等？

【问题讨论】：

我不确定您是否真的需要 puppeteer。其实react comes with built-in support for this
是的，您指的是静态一次，通过渲染到字符串。我的用例是一个获取其他资源的 React 应用程序：天气 api 服务和其他资产。 Puppeteer 帮助解决浏览器上下文中的这些异步加载????

标签： javascript node.js reactjs puppeteer

【解决方案1】：

我有 React 应用程序，我捆绑并放在我的 nodejs 服务器目录中，供 Puppeteer 渲染和捕获一些 html。这是我的工作解决方案：

创建以下文件及其各自的内容：

/assets
  - index.html
  - bundle.js
/render.js

<!-- /assets/index.html -->
<html>
    <body>
        This is a test index.html file

        <div id="root"></div>

        <script src="/bundle.js"></script>
    </body>
</html>

// /assets/bundle.js
(() => {
   document.getElementById('root').innerHTML = "The JS bundle loaded!! " + new Date().toISOString()
})()

// /render.js

const puppeteer = require('puppeteer')
const fs = require('fs')
const path = require('path')

const browser = await puppeteer.launch();
const page = await browser.newPage();

const assetFilePath = path.join(__dirname, "./assets/index.html");

await page.setRequestInterception(true);

page.on("request", interceptedRequest => {
  const url = interceptedRequest.url();

  if (url.startsWith("file://") && !url.match(assetFilePath)) {
    interceptedRequest.respond({
      body: fs.readFileSync(
        path.join(__dirname, "./assets/", url.replace("file://", ""))
      )
    });
  } else {
    interceptedRequest.continue();
  }
});

await page.goto(`file://${assetFilePath}`, {
  waitUntil: "networkidle0"
});

const html = await page.evaluate(() => {
  return document.documentElement.innerHTML;
});

console.log(html);

运行npm install puppeteer

运行node render.js

【讨论】：