FrontEnd

[Next.js]FirestoreのデータをServer Componentから取得する

投稿日:

はじめに

最近、Next.jsでFirestoreをバックエンドとしたPublicサイトの開発を進めていて、どのようにFirestoreのデータを取得するか、色々と調査検討してみたので、その結果をまとめます。

開発の方針は以下の通りです。

  • 1日1回、Firestoreの配信データが更新され、そのデータを閲覧できるサイト (多少ラグがあって良い)
  • Firestoreは極力無料枠に収めたい。そのためにリクエスト回数を抑制したい。
  • Publicサイトのため、SEOを考慮しNext.jsのサーバサイドレンダリングを活用する。

Next.jsでFirestoreからデータを取得する方法

Next.jsでFirestoreからデータを取得する方法は、いくつか考えられます。

  1. Client Componentで直接Firestoreから取得
  2. Route Handlerを使ってAPI化し、Server Componentからfetchする。
  3. Server Componentで直接Firestoreから取得

今回は、この中で「3. Server Componentで直接Firestoreから取得」を選択しました。それぞれの選択した/しなかった理由をこれから書いていきます。

Client Componentで直接Firestoreから取得

以下のような理由で選択しませんでした。

  • Client ComponentでのレンタリングはSEO的に不利
  • 更新頻度に対してFirestore側へのAPIコール数が過剰になってしまう
  • セキュリティルールの設定が必須

Firestoreのリアルタイム性を活用した機能を実装するのであれば、この選択が良いと思います。

Route Handlerを使ってAPI化し、Server Componentからfetchする。

Client Componentから直接取得する方法に比べ、

  • Server Componentでレンダリングすることにより、SEO的に有利
  • Server Componentで閉じているため、Admin SDKを使用することができ、セキュリティルールは全てのread writeを無効化
  • fetchにrevalidateを指定することで、Firestore側へのAPIコールを減らすことができる

といった点で、当初はこの方法を選択しようと思いましたが、以下のような理由で選択しませんでした。

  • APIは公開されるため、API Key等による認証が必要になる
  • APIごとにキャッシュ時間をカスタムできるのが利点だが、今のところそこまで細かく制御したいニーズがない

Server Componentで直接Firestoreから取得

Pages RouterのISRと同じような概念として、App Routerには Server ComponentのConfigに revalidate があります。初回アクセス時にレンダリングされた内容はキャッシュされ、 revalidate に指定した秒数が経過して初めてのリクエスト時にキャッシュが更新されます。(ただし、すぐ最新化される訳ではなく、2回目以降のリクエストから最新化されます。)
revalidate はそのページ全体をキャッシュします。複数のコンポーネントで revalidate が指定されている場合は、それらの中で一番短い時間が使用されます。(参考)
なお、デフォルトでは false となっていて、一度レンダリングされると、ずっとキャッシュが維持されます。

今回はシンプルな一覧と詳細がメイン機能であるため、この方法を選択しました。
(ちなみに、ページ単位のrevalidateのみでは柔軟性に欠けますが、これとfetchのrevalidationも組み合わせることができ、その場合は特定コンポーネントのみrevalidation間隔を短くすることができます。)

実際に組み込んでみる

Firestoreのセットアップ

詳細な説明は省きますが、Web Appの追加と、Firestoreへの初期データ登録までは完了させておきます。
また、サービス アカウントの認証情報を含む構成ファイル(JSON)をダウンロードし、src/の直下に置いておきます。

Firebase Adminの組み込み

まずは、firebase-adminをインストールします。

次に、firebaseの初期化処理を書くため、 app/lib/firestore.ts を作成します。

ここでは、先ほど配置した構成ファイル(JSON)をimportし、Admin SDKの初期化時に認証情報を渡しています。

Firestoreからデータを取得する部分の実装

先ほどと同じファイルに追記していきます。

ここでは、議事録の一覧を取得して返しています。

page.tsxの実装

最後に、先ほど作った getMeetings() をpages.tsxから呼び、実際に表示させます。また、 export const revalidate を宣言し、適切な値を設定することで、定期的にこのページを更新しつつ、Firestoreへのリクエストを抑えます。

このように、Server Component内でFirestoreへのリクエストを完結させることで、クライアント側にその部分を隠蔽することができます。

さいごに

Server Componentのrevalidateを使用することで、Pages Router時代のISRと同じような挙動を作り出すことができました。

おすすめ書籍

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

フォロー

blog-page_side_responsive

2024年1月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。