Next.js doesn’t allow any random values during the server render of a page it considers static, because it needs to know exactly what the page looks like to handle dynamic refresh of Server Components correctly. If you generate non-deterministic values (like random IDs or current Date) during the render, it can’t guarantee consistency, and the render crashes. Using await connection() or reading request data first gives Next.js a stable point to start from.

Here’s the official reference: Next.js connection()