Nuxt3 + Cloudflare Workersを使ってみた感想

基本的に全てSSR（サーバーサイドレンダリング）

Nuxtの最新版であるNuxt3はレンダリングにNitroというエンジンを使っていて、Nitroはビルド時に、

NITRO_PRESET=cloudflare

を頭につけることで、Cloudflare Workersに最適化してくれます。

NITRO_PRESET=cloudflare yarn nuxt build

Getting started with Nuxt 3 and Serverless Redis

Nuxt3では、ルートごとにキャッシュやレンダリングのルールを決めることができるそうですが、自分は使い分けを調査しきれず、うまく動作させることができませんでした。nuxt buildを使っているので、当然ですがSSG（静的サイト）ではありません。

SSGにするなら、Cloudflare PagesでNuxt3をホスティングして、Cloudflare Pages Functions（Cloudflare Pages内で動くWorkers）で動的APIを内包するという手も考えましたが、Cloudflare Pagesには動的に出力したいページをSSR（サーバーサイド・レンダリング）する方法がないので、断念しました。

動的なページはどうやって動く？

Nuxt3をCloudflare Workersでホスティングする最大のメリットは、Cloudflare自体がサーバーレスファンクションサービスなのでAPIを内包できることです。

Nuxt3では、プロジェクト直下に「server/api/」ディレクトリを用意することでAPIを内包できます。

Server Engine | Nuxt3

これを使うことで、本当のAPIを隠して動作させることができます。ちなみに、単純にデータを取得するだけなら、このAPI内包機能を使わないで、APIを直接コールすればOKです。

Cloudflare Workersの無料枠でどれくらい捌ける？

Cloudflare Workersは高速動作で無料枠が使えるサービスです。無料枠は毎日10万コールまでで、通常ならかなり余裕です。しかし、Nuxt3をWorkersでホスティングする場合、Nuxt3を構成するファイルごとにリクエストが発生するので、10万PVも捌けません。

Nuxt3でビルドしたシンプルなアプリでも、1PVあたり10ファイルくらいはファイルリクエストが発生するので、毎日のアクセス数が1万PVを超えるようなサイトをホスティングするのは難しいでしょう。

イメージ的には、無料枠で捌くなら、毎日5000PVくらいが上限ではないでしょうか。5000PV/日を超えると、Workersのもう一つの制限である「1000 リクエスト/分」の方に引っかかる気がします。

Cloudflare Workersは月額5ドル有料プランで、月間1,000万回のリクエスト（超過分は100万件あたり月額0.15ドル）なので、アクセスが多いサイトの場合はそちらも視野に入れたほうが良いですね。

まあ、毎日5000PVということは、月間15万PVということですから、月額5ドルくらいは出せるでしょう。

動作はどう？

実際にやってみて、速度は問題ないイメージでした。外部APIからデータを取得して、SSRするのも500msくらいでは捌けているので、ユーザー的にもSEO的にもプラスになるかなと思います。

ただ、フロントエンド向けのVue.jsをベースに、Node.jsサーバーなどと同じようなことが（制限付きだけど）できるというにはJAM Stack好きには嬉しいポイントです。

仮にCloudflare Workersが課金になったとしても、Herokuなんかのサーバーレスで同じようなことをしようとすると、月額20ドル以上がほぼ確定なので、コスパは良いと思います。