Question

我正在尝试为我的react应用实现服务器端渲染（又名SSR）。我创建了一个带有木偶的express应用，并获得了以下摘要的端点。

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}`);
});

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

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

Answer 1

您正处在循环中，一遍又一遍地请求相同的url。您的react应用位于端口3000中，而该Express应用位于端口3003中。如果将它们分开，则可以使它们易于阅读。

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

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

反之亦然。

Puppeteer，ExpressJS，React SSR

1 个答案: