Next.js - Serverless rendering with Clouflare Workers?

Question

I'm using Next.js v9 and would like to take advantage of Next's serverless deployment option by using my application with Cloudflare Workers.

From the Next.js docs, I know that every serverless function created by Next has the following signature:

export function render(req: http.IncomingMessage, res: http.ServerResponse) => void

When using Node's http.Server class (using express for example), passing in the req and res object becomes trivial and there is an example shown in the docs of doing this.

However, the issue is that Cloudflare Workers use a different Request and Response object than Next expects. The docs for their Request object can be found here and the docs for their Response object can be found here.

So while a simple "hello world" app running on Cloudflare Workers looks like this:

// 1. Register a FetchEvent listener that sends a custom
//    response for the given request.
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

// 2. Return a custom request object
async function handleRequest(request) {
  return new Response('hello world')
}

and rendering a simple Next.js function might look something like this:

const page = require('./.next/serverless/pages/some_page.js');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return page.render(request, new Response());
}

there is an inherent mismatch between the resuest and response types so I suspect errors will be thrown.

I know that I need to modify these so that they're passed in as Next.js expects. I know that the Worker's Request object can be modified as seen here. But I'm unsure of how exactly to make it match with the http.IncomingMessage object. And I'm not sure on how to format the Response object either. Any thoughts?

Thank you

Answer 1

What you're aiming to do is replicate the API for the Node.js http module which provides http.IncomingMessage and http.ServerResponse. That seems like a monumental undertaking that, in some ways, defeats the purpose of working with Cloudflare Workers which are modeled on the Service Worker API. Instead, consider dropping Next.js for a Cloudflare Workers-specific approach to SSR for React, as Cloudflare demonstrates here.

Answer 2

You can try to mimic the response object like this.

        const page = require('./.next/serverless/pages/some_page.js');

        addEventListener('fetch', event => {
            event.respondWith(handleRequest(event.request))
        })

        async function handleRequest(request) {
            return new Promise((resolve) => {
                const response = {
                    setHeader: () => {},
                    getHeader: () => {},
                    end: (htmlString) => {
                        resolve(htmlString);
                    },
                };
                page.render(request, response);
            });
        }