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

Hamrick

This will be complicated. ReadableStreams and NodeJS Readables are completely different internally. The list goes on with other implementations. So filling the gap here will be a lot of work. I guess its way easier to rework the routing ... – Ard

Yeah it looks that way. But could clarify what you mean by "rework the routing"? – Hamrick

Well, don't use NextJS. – Ard

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.

Roughage

I see, thanks for the head's up and the link. Do you think it would be possible to use Next in the traditional way - i.e. without specifying the build target as serverless - with Cloudflare? Having to write the application using the bare-bones renderToString approach defeats the purpose of using Next.js after all – Hamrick

No, I don't. I think if you're committed to Next.js you're better off using Netlify or Zeit which are more geared to running Node.js apps, which Cloudflare Workers just aren't. – Roughage

Gotchya, much appreciated – Hamrick

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

Decanal

Thank you, I will try this out – Hamrick

@Hamrick how'd you go? – Vasiliu