設計
Notion APIをCMSとして使う技術ブログをCloudflare Pagesで運用していたが、Edge Runtimeの制約に悩まされていた。
@opennextjs/cloudflareを使えばWorkers上でNode.js互換モードで動き、SSGも使えると知り、移行を決意。しかし結果的にはPagesに戻すことになった。
Cloudflare Pages vs Workersの実際のパフォーマンス差
OpenNext（@opennextjs/cloudflare）のメリット・デメリット
Pages→Workers→Pagesの移行手順
それぞれのアーキテクチャが向くユースケース
Cloudflareのデプロイ先を迷っている方
OpenNextの導入を検討している方
Edge RuntimeとNode.js Runtimeのトレードオフを理解したい方
export const runtime = 'edge' が全動的ルートに必須
crypto, fs, path 等のNode.js APIが使えない
@notionhq/clientがcrypto依存で動かない
cheerio等のNode.js依存パッケージも動かない
generateStaticParams()が使えず、SSG不可
Node.js互換モードでnpmパッケージがそのまま動く
generateStaticParams() + SSGが使える
ISRもサポート
これは移行するしかない、と思った。
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"]
generateStaticParams()で全ページを静的生成し、ビルド時に全記事のHTMLを事前生成。
Workers無料プランはCPU時間10ms制限。Next.jsのSSRはそれを超えるため、$5/月の有料プランにアップグレード。
| ページ | Workers (OpenNext) | 期待値 |
|---|---|---|
| TOP | 3.2s | <0.5s |
| 記事詳細 | 5.8s | <1s |
| 記事一覧 | 4.1s | <1s |
SSGで全ページを静的生成しているはずなのに、TTFBが3-6秒。
WorkersはSSG生成済みHTMLもWorker経由で返す（CDN直接ではない）
Workerのコールドスタート時間がかかる
Notion APIのレート制限でビルド中に503エラーが多発
結果的にSSGとして機能しない記事が多数あった
全動的ルートに export const runtime = 'edge' を追加
generateStaticParams() を全削除（Edge Runtimeと非互換）
@opennextjs/cloudflare, esbuild を削除
@cloudflare/next-on-pages を再インストール
open-next.config.ts, wrangler.toml を削除
Next.js 16→15.1.0にダウングレード（v16はTurbopack強制でEdgeビルド非互換）
Cloudflare Workersスクリプトを削除
新規Pagesプロジェクトを作成
DNSのCNAMEレコードをPages向けに変更
Pagesにnodejs_compatフラグと環境変数を設定
CI/CDをPagesデプロイに更新
| ページ | Workers | Pages + Cache Rule |
|---|---|---|
| TOP | 3.2s | 0.07s |
| 記事詳細 | 5.8s | 0.064s |
| 記事一覧 | 4.1s | 0.073s |
Pages + CDN Cache Ruleの組み合わせでWorkersより圧倒的に速くなった。
| 要件 | Pages | Workers (OpenNext) |
|---|---|---|
| 静的サイトのTTFB | ◎ CDN直接 | △ Worker経由 |
| SSRのTTFB | ○ + Cache Rule | △ コールドスタート遅い |
| Node.js API | ❌ 使えない | ◎ 使える |
| SSG | ❌ Edgeと非互換 | ◎ 対応 |
| npmパッケージ互換性 | △ 制約あり | ◎ 高い |
| コスト | ◎ 無料 | ○ $5/月 |
| CDNキャッシュ | ◎ Cache Ruleで強力 | △ 制御しづらい |
個人ブログ・コンテンツサイト: Pages + Cache Ruleがおすすめ。CDNから直接返却されるため圧倒的に速い。
複雑なアプリケーション: Workers (OpenNext)が向く。Node.js APIやISRが必要な場合。
Pagesでの最大の弱点「SSGが使えない」はCache Ruleで補える。 実質的に同じ効果が得られる
Workersの有料プラン($5/月)は解約しても期間終了まで使える。
DNSのCNAME変更後はネガティブキャッシュ（最大30分）に注意。 携帯や別のDNSを使うユーザーからはアクセスできない時間帯がある
OpenNextはNode.js互換性が魅力だが、Worker経由のTTFBがボトルネックになる
PagesはCDN直接返却のため静的コンテンツが圧倒的に速い
SSGがなくてもCache Ruleで実質的に同じ效果が得られる
「とりあえずSSGにしたい」だけのために Workersに移行するのは危険
移行前に実際のTTFBを計測して判断することが大事
