When building Next.js applications that leverage server-side rendering (SSR) or Partial Prerendering (PPR), it is essential to wrap components that access dynamic or non-deterministic values (e.g. random values, current time, request-specific data) in Suspense boundaries with appropriate fallbacks. This ensures proper handling of components that cannot be statically prerendered, preventing hydration mismatches and improving performance. Specifically, developers should: 1. Identify components in their Next.js application that rely on dynamic or non-deterministic data. 2. Wrap these components in a Suspense boundary, providing a fallback UI to display while the dynamic content is being fetched. 3. Ensure that the fallback UI is visually consistent with the final rendered component, to maintain a seamless user experience. Here is an example of the correct usage of Suspense in a Next.js component: ```jsx import { Suspense } from 'react' export default function Page() { return (

This will be prerendered

) } ``` By following this pattern, developers can leverage the benefits of Next.js's SSR and PPR capabilities while ensuring a robust and consistent user experience, even for components that rely on dynamic data.