Impure Functions
Impure functions like Math.random() should not run during prerendered client renders unless you intentionally isolate them. These examples show the two safe patterns to avoid hydration errors in Next.js 16.
Example 1 - Generate the value in useEffect
Use this when the random value only needs to exist after hydration. The server and the first client render stay deterministic.
Generating random number on the client...
Example 2 - Wrap render-time randomness in Suspense
Use this when you need to generate the random value on the server with cache components
Loading...