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.IningMessage, res: http.ServerResponse) => void
When using Node's http.Server
class (using express
for example), passing in the req
and res
object bees 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.IningMessage
object. And I'm not sure on how to format the Response
object either. Any thoughts?
Thank you
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.IningMessage, res: http.ServerResponse) => void
When using Node's http.Server
class (using express
for example), passing in the req
and res
object bees 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.IningMessage
object. And I'm not sure on how to format the Response
object either. Any thoughts?
Thank you
Share Improve this question asked Dec 2, 2019 at 5:51 mrstack999mrstack999 3273 silver badges12 bronze badges 3-
This will be plicated.
ReadableStream
s and NodeJSReadable
s are pletely 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 ... – Jonas Wilms Commented Dec 2, 2019 at 6:54 - Yeah it looks that way. But could clarify what you mean by "rework the routing"? – mrstack999 Commented Dec 2, 2019 at 7:00
- Well, don't use NextJS. – Jonas Wilms Commented Dec 2, 2019 at 7:02
2 Answers
Reset to default 6What you're aiming to do is replicate the API for the Node.js http
module which provides http.IningMessage
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.
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);
});
}