connection

The connection() function allows you to indicate rendering should wait for an incoming user request before continuing.

It's useful when a component doesn't use Request-time APIs like cookies or headers, but still needs to produce different output per request, such as Math.random() or new Date().

app/page.tsx
import { connection } from 'next/server'

export default async function Page() {
  await connection() // prerendering stops here
  // the following code only runs at request time
  const rand = Math.random()
  return <span>{rand}</span>
}

Examples

Synchronous database drivers

Queries from synchronous database drivers like better-sqlite3 complete during prerendering. If you are not already using Request-time APIs, call connection() before your query to exclude them from prerendering:

app/lib/data.ts
import { connection } from 'next/server'
import Database from 'better-sqlite3'

const db = new Database('app.db')

export async function getVisitorCount() {
  await connection()
  return db.prepare('SELECT value FROM counters WHERE name = ?').get('visitors')
}

Now any component that calls getVisitorCount() will be excluded from prerendering, along with the rest of its output.

Reference

Type

function connection(): Promise<void>

Parameters

  • The function does not accept any parameters.

Returns

  • The function returns a void Promise. It is not meant to be consumed.

Good to know

  • connection replaces unstable_noStore to better align with the future of Next.js.
  • The function is only necessary when dynamic rendering is required and common Request-time APIs are not used.
  • With Cache Components, place the component that calls connection() inside a <Suspense> boundary, either directly or through an ancestor such as a loading.js file. The nearest boundary's fallback is prerendered into the static shell, and the code after connection() runs at request time. Without a boundary, navigations to the route block instead of being instant.
  • With Cache Components, prefer io() for excluding content from the static shell. It works the same way, and it can also be called inside a "use cache" scope, where it resolves immediately. Reach for connection() only when rendering should wait for a real user request.

Version History

VersionChanges
v15.0.0connection stabilized.
v15.0.0-RCconnection introduced.

Last updated