Next.js に Firebase Authenticationを導入: CSRとSSRによるストラクチャの差異

CSR

SSR

AuthContextとMiddlewareの違い

AuthContext（クライアントサイド）

役割：

• Reactアプリケーション内での認証状態管理
• ユーザー情報の保持と更新
• ログイン/ログアウト処理

動作タイミング：

• ページが読み込まれた後
• Reactコンポーネントがマウントされた後
• ユーザーがページ間を移動する際

Middleware（サーバーサイド）

役割：

• ページアクセス前の認証チェック
• 未認証ユーザーのリダイレクト
• ルートレベルの保護

動作タイミング：

• ページが読み込まれる前
• ユーザーがURLにアクセスした瞬間
• Next.jsのルーティング処理の前

項目	AuthContext	Middleware
実行場所	クライアント（ブラウザ）	サーバー（Next.js）
実行タイミング	ページ読み込み後	ページ読み込み前
目的	認証状態の管理	アクセス制御
データ取得	Firebase → バックエンドAPI	クッキーからID Token
リダイレクト	router.push()	NextResponse.redirect()
パフォーマンス	ページ表示後にチェック	ページ表示前にチェック

連携の流れ

1. Middleware：ページアクセス時に認証チェック
2. AuthContext：認証済みユーザーの状態管理
3. 各フック：認証されたユーザーでAPI呼び出し

2層構造により、セキュリティ（Middleware）とユーザー体験（AuthContext）の両方を向上できる。
※CSR方式でもAuthContextとMiddlewareの両方があるのは問題ありません。むしろ適切な設計。