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