Puppeteer，ExpressJS，React SSR

Question

我正在嘗試為我的React App實現服務器端渲染（又稱SSR）。 我創建了一個帶有puppeteer的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中，而該快速應用程序位於端口3003中。如果您將它們分開，則可以使內容更易於閱讀。

您必須在端口3000上運行react服務器，並指向該服務器，否則它將不知道在何處瀏覽。

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

和副瓦爾薩。