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-RC	connectionが導入されました