Server Client Page Split

Separate server-side rendering from client-side interactivity in Next.js App Router by splitting your code into a 'page.tsx' file for server-side logic and a 'page-client.tsx' file for client-side state management. This pattern enhances performance and maintainability.

Pages using useSearchParams require Suspense to ensure proper lazy loading and performance during server-client separation. This boundary prevents the client from blocking the server-rendered HTML stream.

Use server-client page separation in React when a route requires server-side data fetching alongside client-side interactivity. This pattern is ideal for complex interfaces like wizards and entity list pages.

Server-client page separation requires understanding of React's 'use client' feature to define clear boundaries. You apply this directive in the 'page-client.tsx' file to enable client-side state management.

The best way to optimize Next.js App Router performance for mixed pages is implementing a server-client page split. Defining clear boundaries between server-side data fetching and client-side state management optimizes route performance.

You cannot manage client-side state directly in a server-rendered component. You must split the route into a server-side 'page.tsx' and a client-side 'page-client.tsx' to handle interactivity without breaking the server-client separation.