06. connection() API

connection()を使用して動的レンダリングを強制し、Math.random()やDate.now()などを正しく扱う方法を示します。

概念

connection()は、レンダリングがユーザーリクエストを待つように指示する関数です。

通常、Math.random()やDate.now()はビルド時に評価されてしまいますが、connection()を使うことでリクエスト時に評価されます。

Dynamic APIを使用していない場合に、動的レンダリングを強制する必要があるときに有効です。

connection()なし

静的レンダリング - ビルド時に値が固定される

実用

connection()あり

動的レンダリング - リクエストごとに新しい値が生成される

実用

Date.nowの動作比較

connection()呼び出し後のDate.now()の挙動

実用

connection()の使用例

どんな時にconnection()を使うべきか

実用
✅ 使うべき場合
  • • Math.random()で毎回異なる値が必要
  • • Date.now()やnew Date()で現在時刻が必要
  • • process.env を実行時に読み取る必要がある
  • • その他、リクエストごとに変わる値を扱う場合
❌ 不要な場合
  • • cookies()、headers()を既に使用している
  • • searchParamsを使用している
  • • その他のDynamic APIを使用している
  • • 静的レンダリングで問題ない場合

試してみよう

  1. 各カードの値を確認してください。
  2. ページをリロードして、connection()なしのカードの値が変わらないことを確認してください。
  3. connection()ありのカードは、リロードするたびに値が更新されることを確認してください。
  4. Date.nowの差分を見て、約100msの差があることを確認してください。