Puppeteer、ExpressJS、React SSR答案

【问题标题】：Puppeteer, ExpressJS, React SSRPuppeteer、ExpressJS、React SSR
【发布时间】：2019-02-08 03:12:39
【问题描述】：

我正在尝试为我的 react 应用程序实现服务器端渲染，即 SSR。我用 puppeteer 创建了一个 express 应用程序，并通过以下 sn-ps 获得了端点。

const port = 3003
app.get('*', async (req, res) => {
    try {
        const browser = await puppeteer.launch({headless: true});
        const page = await browser.newPage();
        const local_url = `http://localhost:${port}${req.originalUrl}`;
        await page.goto(local_url, {
            waitUntil: "networkidle0",
        });
        const html = await page.content()
        await browser.close()
        res.send(html);

    } catch(e) {
        console.log(e);
        res.send("ERROR");
    }
});
app.listen(process.env.PORT || port, () => {
    console.log(`Web run ${port}`);
});

我只是不知道为什么这不起作用。我是否必须单独运行我的反应应用程序（在3000 上运行）并将local_url 变量指向那里？喜欢

const local_url = `http://localhost:3000${req.originalUrl}`;

【问题讨论】：

“这不起作用”是什么意思？
@Everettss 好吧，当我加载页面并检查页面的source 时，它应该包含所有反应组件作为 html 标记，对吗？事情没有。

标签： reactjs express puppeteer server-side-rendering

【解决方案1】：

您处于一个循环中，您一遍又一遍地请求相同的网址。你的 react 应用在 3000 端口，这个 express 应用在 3003 端口。如果你把它们分开，你可以让它们更容易阅读。

您必须在端口 3000 上运行反应服务器并指向该端口，否则它将不知道在哪里浏览。

const react_port = 3000;
const server_port = 3003;
const local_url = `http://localhost:${react_port}${req.originalUrl}`;

反之亦然。

【讨论】：