【設計】Cloudflare Workers→Pages出戻り記 — OpenNextのTTFBが遅すぎた話

📌 概要: Cloudflare Pages（Edge Runtime）の制約が厳しくてOpenNext経由でCloudflare Workersに移行したが、TTFBが3-6秒と遅すぎてPagesに出戻りした判断記録。それぞれのメリット・デメリットと、移行・出戻りの具体的手順を残します。

はじめに#

Notion APIをCMSとして使う技術ブログをCloudflare Pagesで運用していたが、Edge Runtimeの制約に悩まされていた。

@opennextjs/cloudflareを使えばWorkers上でNode.js互換モードで動き、SSGも使えると知り、移行を決意。しかし結果的にはPagesに戻すことになった。

1. なぜWorkersに移行したか#

Pages (Edge Runtime) の制約#

• export const runtime = 'edge' が全動的ルートに必須
• crypto, fs, path 等のNode.js APIが使えない
• @notionhq/clientがcrypto依存で動かない
• cheerio等のNode.js依存パッケージも動かない
• generateStaticParams()が使えず、SSG不可

Workers (OpenNext) の魅力#

• Node.js互換モードでnpmパッケージがそのまま動く
• generateStaticParams() + SSGが使える
• ISRもサポート

これは移行するしかない、と思った。

2. Workers移行でやったこと#

セットアップ#

npm install @opennextjs/cloudflare wrangler esbuild

設定ファイル#

// open-next.config.ts
import { defineCloudflareConfig } from '@opennextjs/cloudflare';
export default defineCloudflareConfig({});

そして wrangler.toml の設定:

# wrangler.toml
name = "my-blog"
main = ".open-next/worker.js"
compatibility_date = "2025-03-14"
compatibility_flags = ["nodejs_compat"]

SSG対応#

generateStaticParams()で全ページを静的生成し、ビルド時に全記事のHTMLを事前生成。

有料プランが必要#

Workers無料プランはCPU時間10ms制限。Next.jsのSSRはそれを超えるため、$5/月の有料プランにアップグレード。

3. Workersの問題点 — TTFBが遅すぎた#

計測結果#

SSGで全ページを静的生成しているはずなのに、TTFBが3-6秒。

原因分析#

• WorkersはSSG生成済みHTMLもWorker経由で返す（CDN直接ではない）
• Workerのコールドスタート時間がかかる
• Notion APIのレート制限でビルド中に503エラーが多発
• 結果的にSSGとして機能しない記事が多数あった

⚠️ 教訓: SSGが使える = 速い、とは限らない。Workersは静的ファイルもWorker経由で返すため、CDNから直接返すPagesより遅くなることがある。

4. Pagesに戻した手順#

コード変更#

1. 全動的ルートに export const runtime = 'edge' を追加
2. generateStaticParams() を全削除（Edge Runtimeと非互換）
3. @opennextjs/cloudflare, esbuild を削除
4. @cloudflare/next-on-pages を再インストール
5. open-next.config.ts, wrangler.toml を削除
6. Next.js 16→15.1.0にダウングレード（v16はTurbopack強制でEdgeビルド非互換）

インフラ変更#

1. Cloudflare Workersスクリプトを削除
2. 新規Pagesプロジェクトを作成
3. DNSのCNAMEレコードをPages向けに変更
4. Pagesにnodejs_compatフラグと環境変数を設定
5. CI/CDをPagesデプロイに更新

5. Pages出戻り後のTTFB#

Pages + CDN Cache Ruleの組み合わせでWorkersより圧倒的に速くなった。

6. 結論: どちらを選ぶべきか#

個人ブログ・コンテンツサイト: Pages + Cache Ruleがおすすめ。CDNから直接返却されるため圧倒的に速い。

複雑なアプリケーション: Workers (OpenNext)が向く。Node.js APIやISRが必要な場合。

Tips#

• Pagesでの最大の弱点「SSGが使えない」はCache Ruleで補える。 実質的に同じ効果が得られる
• Workersの有料プラン($5/月)は解約しても期間終了まで使える。
• DNSのCNAME変更後はネガティブキャッシュ（最大30分）に注意。 携帯や別のDNSを使うユーザーからはアクセスできない時間帯がある

参考リンク#

• OpenNext Cloudflare
• @cloudflare/next-on-pages
• Cloudflare Pages vs Workers
• Next.js アプリを OpenNext で Cloudflare Workers にデプロイする（別記事）
• Cloudflare Pages × Next.js のSSR応答を66倍高速化した全記録（別記事）

まとめ#

• OpenNextはNode.js互換性が魅力だが、Worker経由のTTFBがボトルネックになる
• PagesはCDN直接返却のため静的コンテンツが圧倒的に速い
• SSGがなくてもCache Ruleで実質的に同じ効果が得られる
• 「とりあえずSSGにしたい」だけのために Workersに移行するのは危険
• 移行前に実際のTTFBを計測して判断することが大事