NextjsのランタイムとCloudflare workersについて（個人メモ）

Next.jsのランタイム

• node.js

  • すべての Node.js API と互換性のあるパッケージにアクセスできる

• edge runtime

  • Next.js Edge ランタイムは標準的な Web API をベースにして作成された、Node.js APIのサブセット

  • サポートしているAPI

    • https://ja.next-community-docs.dev/docs/app-router/api-reference/edge

  • 以下のようにexportすると使える

    export const runtime = 'edge' // 'nodejs' (デフォルト) or 'edge'
    

    

• 参考:

  • https://ja.next-community-docs.dev/docs/app-router/building-your-application/rendering/edge-and-nodejs-runtimes

エッジランタイムとは

• エッジサーバーでコードを実行するための環境
• 従来のサーバーサイドとは異なり、地理的に分散したエッジサーバー上でコードが実行されるため、低レイテンシ、動的なコンテンツ生成、サーバー負荷軽減などのメリットがある
• NextjsのRSCやmiddlewareやapi routeを実行することが可能
• 主にはJavaScriptやWeb Assemblyが動く

メリット

• レイテンシの低下･パフォーマンス向上
  • 地理的にユーザーに近いエッジサーバーでリクエスト処理するので、パフォーマンスが良くなる
  • Cloudflare Workersの場合はコンテナの起動を待つ必要がないため、常にホットスタート（といかそもそもホット･コールドの概念が存在しない）
  • https://zenn.dev/moutend/articles/97c98a277f4bae#aws-lambdaやgcp-cloud-runとの比較
• オリジンサーバーの負荷を低減できる

デメリット

• リソースの制限
  • バンドルサイズの制限やCPUの利用制限が通常のwebサーバーに比べて厳しい。なので、重い処理などには向かない
  • 例えば、Vercel 上の Edge Runtime で実行されるコードは、1MB から 4MB を超えることはできません。

主要なエッジランタイムプロバイダー

• Cloudflare

  • Cloudflare Workers: JavaScript/WebAssembly を実行可能な、最も普及しているエッジランタイムの一つ。

  • Durable Objects: エッジにおける状態管理を実現するサービス。

  • Workers KV: エッジにおける Key-Value ストア。

  • R2: エッジにおけるオブジェクトストレージ。

  • 制限

    Feature	Free	Bundled usage model	**Unbound and Standard usage model**
    Request	100,000 requests/day
    1000 requests/min	none	none
    Worker memory	128 MB	128 MB	128 MB
    CPU time	10 ms	50 ms HTTP request50 ms Cron Trigger	30 s HTTP request15 min Cron Trigger
    Duration	None	none	15 min Cron Trigger15 min Durable Object Alarm15 min Queue Consumer

• Vercel
  • Edge Functions: Next.js の Middleware や API Routes、Server Components をエッジで実行可能にする機能。
  • Edge Config: エッジで環境変数を管理するサービス。
• Netlify
  • Edge Functions: Next.js や Astro、その他のフレームワークの関数をエッジで実行可能にする機能。
  • Background Functions: 長時間実行可能な関数。

Cloudflare × hoge

• Next.js
  • 一部のNode.js APIのみサポートしている
  • canaryの動作は不安定
    • https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/supported.md
  • edge runtimeとしてexportしないと使えないのが少し面倒
  • Cloudflare Builder Day 2024にて、OpenNextとのコラボレーションが発表された
    • 新しいアダプター@opennextjs/cloudflareを使用することで、Node.jsランタイムのNext.jsアプリをWorkers上で実行できるようになった
    • new Node.js compatibility layer で動く
    • プレビュー段階なので、nodejsを完全に互換しているわけではなく、バグも全然あるっぽい
    • 試しにアプリをデプロイしてみたが、firebase-adminのimportでエラーになった。
• Remix
  • エッジランタイムで完全に動作するらしい。Nextよりも相性が良い
  • 蛇足だけど最近ChatGPTがNextからRemixに移行した

参考

• https://speakerdeck.com/aiji42/biginaxiang-ke-etuzirantaimunosusume-etuzirantaimuwoyi-shi-sitakai-fa-wohazimeyou?slide=45
• https://gemini.google.com/app/39f29c8b67b2e52b