在 Edge 上渲染

什麼是 Edge 執行環境？

Edge 執行環境是指在地理上靠近用戶的伺服器節點上執行的輕量化 JavaScript 環境，例如：

• Vercel Edge Functions
• Cloudflare Workers
• Deno Deploy
• Fastly Compute@Edge

這些環境基於 V8 Isolate 技術，提供極低延遲，但功能比完整的 Node.js 環境受限許多。

可以在 Edge 環境中渲染 Remotion 影片嗎？

不行，目前無法在任何 Edge 環境中渲染 Remotion 影片。 這是由 Edge 環境的根本架構限制所決定的，並非 Remotion 的設計問題。

為什麼 Edge 環境無法支援 Remotion 渲染？

Remotion 的渲染流程依賴以下功能，而這些在 Edge 環境中均不可用：

1. Chromium / 無頭瀏覽器

Remotion 使用無頭 Chromium 瀏覽器逐幀截取 React 元件的畫面。Edge 環境無法啟動任何子行程或二進制執行檔。

2. Node.js 原生模組

@remotion/renderer 使用多個 Node.js 原生模組（如 child_process、fs、path），Edge 環境的 V8 Isolate 不支援這些 API。

3. 檔案系統存取

影片渲染需要讀寫臨時檔案，Edge 環境通常不提供持久化的檔案系統存取。

4. 記憶體與執行時間

Edge 函式通常有嚴格的記憶體（幾十 MB）和執行時間限制（幾毫秒到幾秒），遠不足以完成影片渲染。

各 Edge 平台的具體限制

那麼應該在哪裡執行渲染？

建議使用完整的 Node.js 執行環境：

雲端 Serverless（推薦）：

• Remotion Lambda（AWS Lambda）：官方支援，自動擴展，按需付費
• Google Cloud Run：容器化，支援完整 Node.js 環境

持久化伺服器：

• Railway、Render、Fly.io：部署 Express/Fastify 伺服器
• 自架 VPS：完全控制環境

可以在 Edge 函式中觸發渲染任務嗎？

可以，這是一種合理的架構。Edge 函式可以：

1. 接收用戶請求並進行驗證
2. 呼叫背景渲染服務（例如透過 HTTP 請求到 Lambda 或獨立伺服器）
3. 回傳渲染任務的追蹤 ID

實際渲染仍在 Node.js 環境中執行，Edge 函式只負責轉發請求。

// Cloudflare Worker 範例：轉發渲染請求
export default {
  async fetch(request: Request, env: Env) {
    const body = await request.json();
 
    // 轉發到 Node.js 渲染服務
    const response = await fetch(env.RENDER_SERVICE_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
 
    return response;
  },
};

WebCodecs 可以在 Edge 環境中使用嗎？

不行。@remotion/webcodecs 使用的 WebCodecs API 是瀏覽器 API，僅在真實的網頁瀏覽器環境中可用，Edge 環境（V8 Isolate）不提供這些 API。

未來會支援 Edge 渲染嗎？

目前沒有計劃。Edge 環境的根本限制（無法啟動無頭瀏覽器）使得完整的 Remotion 渲染在此架構下不可行。

如果你有特定的 Edge 使用情境，可以在 Remotion GitHub Discussions 提出，讓社群和 Remotion 團隊一起討論可行的替代方案。

相關資源

• 在 Vercel 上渲染
• Remotion Lambda 設定指南
• 瀏覽器渲染（WebCodecs）
• Docker 部署