こんにちは！SSRにハマっているMizutani(@sirycity)です。ずっとSSGだったから...

今日はそんなSSRに関するFirebaseとCloudflareの比較です。

概要

Firebase(Hosting + Cloud function)とCloudflare(Pages + Workers)の構成に対して主要なJS系フレームワークをSSRモードでデプロイしてみて1週間くらい運用した結果の感想を書いていきます。Next、Astro、Remix、HonoXあたりを検証しました。

注意点

Firebase歴5年以上に対しCloudflare歴数ヶ月のため知識量にだいぶ差があります。あと多分バイアスがかかっています。

Firebaseが良い所

環境を3つ以上作れる

Cloudflareは必ず2つ(Preview、Production)ですがFirebaseは別にいくつでも作れます。まあCloudflareもProjectいっぱい作ればいいんだけどね。

CIの自由度が高い

CloudflareはGit、GitHubと密結合している部分がありCIの自由度がいまいちです。例えばどっちの環境にデプロイするかがブランチ名に依存していて明示できません。tagをpushして本番リリースとかは不可能です。このことに気付くのにかなりの時間を要しました。Firebaseは疎結合なのでやりたい放題です。

裏がNode

Firebaseの裏はFunctionsなので普通のNode.jsです。対してCloudflareはWorkersなので汎用性で劣ります。もっとも最近ではWorkers対応を謳ってるのなんてざらですけどね。僕はDrizzleの設定で苦戦しました。

環境変数の扱いが汎用的

普通の.envを使えます。僕はよく分かってないんですが割愛しますがCloudflareは特殊な設定が必要です。僕はHonoXで大苦戦しました。

招待がめんどい

Googleアカウントは誰でも持っていますがCloudflareアカウントは相手に作ってもらう手間が要ります。

Cloudflareが良い所

価格

安すぎる。全体的にFirebaseより安いですが帯域無料がやばい。けっこう重めのNextjsが無料運用できて感動しました。

デプロイ速度

すごくざっくりですがFirebaseのSSRが5分くらいに対しCloudflareは1分弱です。Vite系だとだいたいこんなもんだった。

表示速度

FirebaseはFunctionsのコールドスタートがある分遅くなりがちですがCloudflareは全くです。

プレビュー環境が使いやすい

毎回新しいURLが発行されます。この機能はFirebaseにもありますがSSRに対応してません。

流行ってる

Web界隈では明らかにこっちが熱いです。

どっちもどっちな所

シンプルさ

GCPに半分乗っかってるFirebaseはまあできることは多いです。でも画面はごちゃごちゃしてます。Cloudflareは少ないですがすっきり。少ないって言っても主要な機能はあります。個人的にはCloudflareが好み。

結論

...えっどっちでも良くない？(技術選定の禁句)

なんかそんな変わらないですね。Vercelのアドセンス使えんとか、Netlifyの日本リージョン無いとかの致命傷が無いですもん。ってかNetlifyの方は別に致命傷じゃない気もするし。強いて言えば環境2個固定とかがまあ辛いかな？

というわけで当分は未来のあるCloudflareに期待しつつどっちも使おうと思います。以上。