06. connection() API
connection()を使用して動的レンダリングを強制し、Math.random()やDate.now()などを正しく扱う方法を示します。
概念
connection()は、レンダリングがユーザーリクエストを待つように指示する関数です。
通常、Math.random()やDate.now()はビルド時に評価されてしまいますが、connection()を使うことでリクエスト時に評価されます。
Dynamic APIを使用していない場合に、動的レンダリングを強制する必要があるときに有効です。
connection()なし
静的レンダリング - ビルド時に値が固定される
- 乱数
- 0.7136414278
- タイムスタンプ
- レンダリングタイプ
- 静的レンダリング（ビルド時）
ページをリロードしても、この値は変わりません（キャッシュされている）。
connection()あり
動的レンダリング - リクエストごとに新しい値が生成される
Date.nowの動作比較
connection()呼び出し後のDate.now()の挙動
connection()の使用例
どんな時にconnection()を使うべきか
✅ 使うべき場合
- • Math.random()で毎回異なる値が必要
- • Date.now()やnew Date()で現在時刻が必要
- • process.env を実行時に読み取る必要がある
- • その他、リクエストごとに変わる値を扱う場合
❌ 不要な場合
- • cookies()、headers()を既に使用している
- • searchParamsを使用している
- • その他のDynamic APIを使用している
- • 静的レンダリングで問題ない場合
試してみよう
- 各カードの値を確認してください。
- ページをリロードして、connection()なしのカードの値が変わらないことを確認してください。
- connection()ありのカードは、リロードするたびに値が更新されることを確認してください。
- Date.nowの差分を見て、約100msの差があることを確認してください。