Chapter 2 · Practice 5 of 6

Call connection() before per-request random values and timestamps

Why it matters

A prerender runs once, so any random value or timestamp it computes would be frozen for every visitor. Under Cache Components, Math.random(), Date.now() and crypto.randomUUID() therefore need an explicit decision.

You need	Do this
A value unique per request	`await connection()` from `next/server` first, and wrap the component in `Suspense`
One shared value is fine	Compute it inside a `'use cache'` scope, so everyone sees the same value until it revalidates

The dev overlay flags these calls, so you do not need to remember every case.

Example

TSX

import { connection } from 'next/server';

async function RequestId() {
  await connection();
  return <p>Request: {crypto.randomUUID()}</p>;
}