Firebaseホスティングに必要な容量は？ReactとNextの比較

Firebaseホスティングに必要な容量は？ReactとNextの比較

Firebaseの利用料金は使用する容量も関係します。

そこで、サーバーサイドでレンダリングするNextとブラウザでレンダリングするReactでどの程度の差があるのかを実際の実装を基にデータを取ってみました。

最近、Firebaseのバックエンドの実行環境が変わっていろいろなポリシーが変わったようで、使用している容量が大きくなているので調べてみました。

Firebaseのホスティングに関係する容量は？

Firebaseでホスティングする場合に関係する使用容量は2種類あります。

ホスティングで使用している容量

ストレージで使用している容量

です。この内Webホスティングで使用している容量は基本的にWebページ関連の容量で、大きなビデオや写真などのイメージがない場合はそれほど大きくならないのが普通です。

比較の例として、最近運営してる記事の投稿サイトを例にしてみました

＊　Firebase関連の記事のサイト

＊　趣味の登山のサイト

です。どちらも似たようなサイトにしてあります。

Firebase関連の記事を投稿しているサイト

このサイトは、Nextを利用して実装しています。サーバー側で表示するページを動的にレンダリングして記事を表示するようにしています。

殆どイメージは使用していないので、記事の平均的なサイズはせいぜい数十KBです。従って使用容量を見る際に記事の件数はサイズには余り影響が出ません。

趣味の登山のサイト

このサイトは２つのReactアプリを実装しています。 一つは記事の投稿サイトで内容はFirebase関連の記事を投稿しているサイトと同じように見える実装にしてあります。 もう一つは１ページアプリで登山中の推奨心拍数の計算や、登山中のGPSと心拍数のデータの解析サービスを提供しています。

どちらもReactで実装しています。つまり、レンダリングはブラウザー側で行っています。

共通の実装は？

共通の実装は、Firebaseのストレージに記事を投稿するようになっています。この記事を取り込んで動的にページのレンダリングを行っています。

つまり、

記事はFirebaseのストレージに投稿

ページの表示は、表示するページをFirebaseのストレージから動的に生成

という点では同じような実装になっています。

サイトで使用している容量が大きく違う！

Firebaseコンソールからの使用容量の比較データです。 ホスティングのデータは現在稼働中の物のみで古いデータは消去しています。 参考までに、シリコンバレースーパーウエアのサイトのデータも載せてあります。このサイトは、静的にバックエンドでサイトデータを作っています。（Nextは使っていません）

                  | ホスティングの容量  | ストレージの容量 | 記事数 | 備考

--------------------------------------------------------------------------------

＊Next         | 4MB強                   | 487MB               | 20      |

＊React        | 17MB強                 | 22KB                 | 5        |2 App

＊sv-sw.com | 170.8KB               | 434MB               | N/A     |

これを見ると容量の差は明らかです。バックエンドのサービス（FirebaseのFuncitonsの機能）を使うと必要なストレージの容量が確実に大きなものになるのがお分かりかと思います。

Reactのホスティングでの使用容量が多いのは、このプロジェクトでは２種類のReactアプリを実装している事が大きいと考えられます。

何故大きな容量が必要になるのか？

これは、最近のFirebaseのFunctionsの実行環境がNode8からNode10に変更になりました。 これに伴い幾つかのポリシーの変更があったようで、一つは、FirebaseのFunctionsは有料プランにしないとインターネットで公開ができなくなった。以前は外部サービスを利用しない場合は無料プランでもインターネットで公開ができました。

つまり、バックエンドサービスで利用するには、有料プランにしなけらばならなくなりました。（ただし、使用容量やアクセス数が制限内の場合は料金は発生しません）

これ以外の変更に、バックエンドの実行に必要な環境の為の容量をストレージ容量に含めるようになったようです。これが大きいために使用容量が大きくなっています。（「artifact」という別の分類の容量として表示されています。これが４８２MBあります）

実用上は大きな問題ではありません！

使用するサイズが大きく違うのは事実です。しかし、実際に運用する上でこれが大きな問題となるかというと、実は余り大きな問題ではありません。記事の数にこの容量は殆ど影響されないので、このような記事の投稿サイトとして運営するとすると、有料になるサイズまではまだまだ余裕があります。ストレージ容量の無料の範囲は使用容量が５GB以下です。

従って、有料になる容量まではまだまだ余裕があるので実用上は大きな問題ではありません。

まとめ

使用するフレームワークによって、Firebaseで大きな差が出る事があります。バックエンドのサービスを利用すると、利用しない場合に比べて使用容量が大幅に増えます。 実用上は、無料の制限まではかなり余裕があるので問題にはなりません。

しかし、これぐらい容量の差があると、実際にNextでWebサービスやWebアプリを作る必要があるのかは再度考えた方が良いと思います。現在は、サーチエンジンも動的に生成したページでも対応できるといわれています。実際に違いがあるのかはハッキリは分からないので、別の実装で試験的に運用しています。SEO対策でも大きな差が出ないとなると、こうしたブログのような、記事の投稿サイトの場合、わざわざサーバー側でレンダリングする必要性は余りないと言えます。

この辺りは、もう少し時間をかけてサイト運営したうえで別に記事を書こうと思っています。ハッキリした事は結構時間をかけないとわからないと思いますので記事はかなり先になると思いますが調査は継続して行う予定です。

Firebaseでサイトを構築する場合、基本はフロントエンドで作って必要な部分のみをバックエンドで対応という作り方が使用容量という観点だけから見ると有利なようです。