connection

connection() 関数は、レンダリングが続行される前にユーザーからのリクエストを待つように指示することができます。

これは、コンポーネントが Dynamic APIs を使用しない場合でも、ビルド時に静的にレンダリングされるのではなく、実行時に動的にレンダリングしたい場合に便利です。通常、Math.random() や new Date() のように、レンダリングの結果を意図的に変更したい外部情報にアクセスする場合に発生します。

TypeScript

app/page.tsx

import { connection } from 'next/server'

export default async function Page() {
  await connection()
  // 以下のすべてはプリレンダリングから除外されます
  const rand = Math.random()
  return <span>{rand}</span>
}

JavaScript

app/page.js

import { connection } from 'next/server'

export default async function Page() {
  await connection()
  // 以下のすべてはプリレンダリングから除外されます
  const rand = Math.random()
  return <span>{rand}</span>
}

リファレンス

型

function connection(): Promise<void>

パラメーター

• この関数はパラメーターを受け取りません。

戻り値

• この関数は void の Promise を返します。消費することを意図していません。

Good to know

• connection は、Next.js の将来により適合するように unstable_noStore を置き換えます。
• この関数は、動的レンダリングが必要であり、一般的な Dynamic APIs が使用されていない場合にのみ必要です。

バージョン履歴

バージョン	変更点
v15.0.0	connection が安定化されました。
v15.0.0-RC	connection が導入されました。