Next.jsとfirebaseを用いたユーザ認証の設計
Next.js では認証データをいつ受け取るかで２つの種類がある
Static Generation を用いて SSR のようにサーバで骨組みを用意、クライアントでユーザ情報を取得する方法
高速にページを表示できる
Global CDN が使える
サーバで配信するのは骨組み、つまり静的なファイルのため
next/linkの pre fetchが効く
Static Generation = SSG を指すらしい
Server side でユーザ情報を予め取得し、レンダリングする
SSG
必要のない情報をレンダリングする必要がない
例えばログインしてないユーザにマイページの骨組みをレンダリングする必要ない
初回表示までの時間が長い
１つ目の方法よりは推奨されてないっぽい
SSG を使い頑張って初回のデータをレンダリングする必要はないという意見もある
Next.js と firebase auth を用いたユーザ認証設計
Next.js では firebase auth のプラグインを使用する方法
認証に時間がかかるから Static Generation を使った方法を推奨している
このプラグインを使うべきではない場合
静的ページのみ・SSRでユーザ情報が必要ない場合
firebase SDK を使う方法でもよい
getServerSidePropsでユーザ情報がとれない
SSR で firebase の user 情報を取得する、ただし ID taken を必要としない場合
Firebase の cookie で管理
クライアントの処理なのでログイン・ログアウトのエンドポイントが必要ない
Cookieは署名されておらず、他のJavaScriptからアクセスできるため、このアプローチの安全性は低くなります。サーバー側でFirebaseIDトークンに常にアクセスできるとは限らないため、他のFirebaseサービスにアクセスすることはできません。 （CookieにIDトークンを設定できますが、1時間後に期限切れになり、将来のサーバー側でレンダリングされるページでは無効になることに注意してください。）
Firebase session cookie を使う
サーバー側でFirebaseIDトークンにアクセスできないため、他のFirebaseサービスにアクセスできなくなります。セッションを検証し、セッションの状態を管理するためのロジックを実装する必要があります。
プラグインを使わない方法
プラグインを使うほど複雑ではないような気もしている
SSR での認証を行いたいので next-firebase-auth を使うことにした