Puppeteer，ExpressJS，React SSR

Question

i am trying to achieve Server Side Rendering aka SSR for my react app. I created an express app with puppeteer and got endpoint with following snippets.

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

I just don't know why this is not working. Do I have to run my react app(run on 3000 ) separate and point local_url variable to there? like

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

Answer 1

You are in a loop where you are requesting same url over and over. Your react app is in port 3000, and this express app is in port 3003. You can make things a bit easy to read if you seperate them.

You have to run the react server on port 3000 and point to that otherwise it won't know where to browse.

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

and vice varsa.