Next.js - 使用 Cloflare Workers 进行无服务器渲染？

Question

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

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

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

当使用 Node 的http.Server类（例如使用express ）时，传入req和res对象变得微不足道，并且在执行此操作的文档中显示了一个示例。

但是，问题在于 Cloudflare Workers 使用的Request和Response对象与 Next 预期的不同。 他们的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对象。 有什么想法吗？

谢谢

Answer 1

您的目标是复制Node.js http模块的 API，该模块提供http.IncomingMessage和http.ServerResponse 。 这似乎是一项艰巨的任务，在某些方面，它违背了使用基于 Service Worker API 建模的 Cloudflare Workers 的目的。 相反，考虑将 Next.js 用于 Cloudflare Workers 特定的 React SSR 方法，正如 Cloudflare 在此处演示的那样。

Answer 2

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

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