SSRNuxt.jsをサーバーで動かしてFirestoreを使い、且つサーバーサイドレンダリングしたい時には色々考えることが出てきます。懸念点と対応した方がよさそうな点をまとめてみます。SSRしない場合との違いSSRせずクライアント上でFirestoreからデータを取る場合ですが、匿名認証にしろ、SNSアカウントの認証にしろ、認証しているかどうかでセキュリティルールによりデータを守りやすく、他者によるFirebaseプロジェクトの設定を盗用しての勝手な操作を防いだりすることができます。asyncData内によるSSRとなると、そのクライアント側の認証情報を利用することはできません。なるとデータを守れないどころか、そもそもセキュリティルールが設定されているとデータにアクセスすることすらできません。いう時にどうすれば良いかを考えます。Functionsを利用する方法を考えました。具体的にどうするかというと、asyncData内ではfunctionsからデータを取るだけにします。下記のような感じです。}呼び出し方はどうであれ、通信が発生するので上記のようにリクエストは1回にした方が良いでしょう。functions側でそのページ専用のアクションを作ってデータを返します。思われるかもしれません。SDKというものがあります。これはセキュリティルールに関係なくデータを扱うことができるため、これを利用します。具体的には下記のような形です。user}クライアント側とは微妙にcollectionの取り方が違うだけで、基本的にはほぼ同じです。このようにしてサーバーサイドレンダリングのためのデータ取得処理を行うことができます。セキュリティルールを無視で良いのか?今回の例のfunctions側でのデータ取得処理に関しては、ルールを無視で問題ありません。いうのも、そもそもSSRの目的としては、クローラに認識してもらうためのSEO対策になるかと思います。ユーザー認証が必要なデータを取る必要は一切無いということになります。誰もが閲覧できるパブリックなデータを取るだけです。そのため基本的には認証に関するセキュリティルールをこの場で考慮する必要はありません。corsはちゃんと挟んでおきましょう。なんとなく手軽さが失われた感じはありますが、それでもまあサーバーを管理する必要が無いのは大きなメリットではあることに変わりはないでしょう。他にも色々と方法はあるかもしれませんが、とにかくどの様な方法にしろ、どのようにデータを守るかはしっかり考えて構築が必要となります。以前認証とセキュリティルールについて書いた考察もありますので、もし気が向いたらそちらもぜひ御覧ください。セキュリティ編ツイッターでシェアみんなに共有、忘れないようにメモマシュマロでメッセージか投げ銭?だら@Crieit開発者Crieitの開発者です。LAMPで開発しているWebエンジニアです(在宅)。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。Vue等色々https://torima.appllis.net/users/dala00Crieitは個人で開発中です。どんな軽い内容でも嬉しいです。Crieitを作ろうと思ったかまた、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!ボードとは?関連記事Firestoreの簡易管理ツールをNuxt.jsでつくってみたNuxt.js(SPA)+FirebaseのWebアプリで初マイグレーションをしてけど、いろいろ失敗した話。