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


関連記事

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サ ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

フォロー

blog-page_side_responsive

2024年1月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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