下一页.js - 使用 Clouflare Workers 进行无服务器渲染?



我正在使用Next.js v9,并希望通过将我的应用程序与Cloudflare Workers一起使用来利用Next的无服务器部署选项。

从Next.js文档中,我知道Next创建的每个无服务器函数都具有以下签名:

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

当使用 Node 的http.Server类(例如使用express(时,传入reqres对象变得微不足道,文档中有一个执行此操作的示例。

但是,问题在于Cloudflare Workers使用与Next预期的不同的RequestResponse对象。可以在此处找到其Request对象的文档,可以在此处找到其Response对象的文档。

因此,虽然在Cloudflare Workers上运行的一个简单的"hello world"应用程序看起来像这样:

// 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')
}

并呈现一个简单的 Next.js 函数可能如下所示:

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

回复类型和响应类型之间存在固有的不匹配,因此我怀疑会抛出错误。

我知道我需要修改这些内容,以便它们按照 Next.js 的期望传入。我知道可以修改工人的Request对象,如下所示。但我不确定如何使其与http.IncomingMessage对象完全匹配。而且我也不确定如何格式化Response对象。有什么想法吗?

谢谢

您打算做的是为提供http.IncomingMessagehttp.ServerResponse的 Node.jshttp模块复制 API。这似乎是一项艰巨的任务,在某些方面,它违背了与Cloudflare Workers合作的目的,Cloudflare Workers是基于Service Worker API建模的。相反,请考虑放弃 Next.js 以获得特定于 Cloudflare Workers 的 SSR for React 方法,如 Cloudflare 在此处演示的那样。

您可以尝试像这样模拟响应对象。

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

最新更新