How to access next.js rendered HTML via custom server

Question

I want a server side generated page in next.js to be served as a file. So I wanted to grab the rendered content inside a custom server.js file:

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/', async (req, res) => {
    const nextResponse = await app.renderToHTML(req, res, '/', req.query);

    console.log('nextResponse', nextResponse);
    console.log('res.body', res.body);
  });

  server.get('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

Oddly enough every console.log returns null or undefined. I thought that renderToHTML would just return the rendered HTML string. Is there any way to do this?

apprently, renderToHtml() doesn't return HTML SSR code, and sends to response socket automatically github.com/vercel/next.js/issues/14737. Try overwritting the middleware response.send method as shown here: nextjs.org/docs/api-routes/api-middlewares with a reference to your own nextResponse to access after the call — Loveen Dyall
– Loveen Dyall, Commented Feb 2, 2021 at 17:09

Nikola Knežević · Accepted Answer · 2021-10-07 21:51:30Z

1

This one is a bit tricky but achievable.

The idea is to override res.end function in order to catch rendered HTML there. The tricky part is that Next.js gzips and streams response using the compression library that's overriding res.end somewhere in the middle of the handle function.

The compression library is initialized using the handleCompression function of the Next.js's Server object (which is accessible using the app.getServer()), so that function needs to get overridden too.

So it should be looking something like this:

const { parse } = require('url');
const next = require('next');
const express = require('express');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

const port = process.env.PORT || 3000;

const handle = app.getRequestHandler();

app.prepare()
.then(() => {
    const server = express();

    server.get('*', async (req, res) => {
        const parsedUrl = parse(req.url, true);

        const nextServer = await app.getServer();
        const _handleCompression = nodeServer.handleCompression.bind(nodeServer);

        nextServer.handleCompression = (req, res) => {
            _handleCompression(req, res);

            const _resEnd = res.end.bind(res)
            res.end = function (payload) {
                console.log('Rendered HTML: ', payload);

                return _resEnd(payload);
            }
        }

        return handle(req, res, parsedUrl);
    });

    server.listen(port, err => {
        if (err) throw err;
        console.log('> Ready on http://localhost:' + port);
    });
});

After you get rendered HTML you don't have to use the saved _resEnd function. Feel free to manipulate, serve as a file, or whatever you want with it.

answered Oct 7, 2021 at 21:51

Nikola Knežević

971 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LUKER Over a year ago

nodeServer is undefined... Where'd you get it from?

Ruslan Novikov Over a year ago

May be nodeServer need renamed to nextServer but code is not worked

Ruslan Novikov Over a year ago

Previously, in older versions of NextJS (11.0.1 for example), in res.end(payload) server gave the payload and it was possible to use them for memjs in server.js. Since version 12 res.end() is called without payload and there is no way to get the data to put it into cache.

Grégory Jakubowicz · Accepted Answer · 2023-12-07 16:22:42Z

I adapted Nikola Knežević solution for NextJS 13.2.3, and it does the job :

const { parse } = require('url')
const next = require('next')
const express = require('express')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port, dir: '<absolute root path to your project>' })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    const server = express()

    server.get('*', async (req, res) => {
        const nextServer = await app.getServer()
        const _handleCompression = nextServer.handleCompression.bind(nextServer)

        nextServer.handleCompression = (req, res) => {
            _handleCompression(req, res)
            const _resEnd = res._res.end.bind(res._res)

            res._res.end = function (payload) {
                // payload contains the html content
                return _resEnd(payload)
            }
        }

        return handle(req, res, parsedUrl)
    })

    server.listen(port, (err) => {
        if (err) {
            throw err
        }
        console.log(`> Ready on http://localhost:${port}`)
    })
})

李龙龙 · Accepted Answer · 2024-10-17 05:37:09Z

0

Reference Gregory Jakubowicz solution, nextjs 14.2.5 no handleCompression method, but can use the new handleCatchallRenderRequest instead of, The following code snippet has been tested locally：

    const _handleCatchallRenderRequest =
      nextServer.handleCatchallRenderRequest.bind(nextServer);

    nextServer.handleCatchallRenderRequest = (
      req: any,
      res: any,
      parsedUrl: any,
    ) => {
      _handleCatchallRenderRequest(req, res, parsedUrl);
      const _resEnd = res._res.end.bind(res._res);

      res._res.end = function (payload: any) {
        // payload contains the html content
        return _resEnd(payload);
      };
    };

answered Oct 17, 2024 at 5:37

李龙龙

1

Collectives™ on Stack Overflow

How to access next.js rendered HTML via custom server

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related