react

Server components optimize performance by rendering on the server, while client components handle interactivity. Modern React patterns use server components by default for data fetching and static content, reserving client components for interactive features, event handlers, and state management.

Data fetching in React leverages Suspense to manage loading states. Define async operations in server components, use Suspense boundaries to wrap components awaiting data, and provide fallback UI. This pattern enables streaming and progressive rendering for better performance.

Streaming UI patterns deliver content progressively instead of waiting for the entire page to render. Use streaming when you have slow or variable-latency data sources, multiple independent components, or large payloads. This improves perceived performance and Time to First Byte.

Common pitfalls include passing non-serializable objects from server to client components, using browser APIs in server components, and incorrect Suspense boundary placement. Following React's component boundaries and serialization rules prevents integration failures.

Structure scalable React apps by using server components for data fetching and layout, organizing client components by feature, implementing proper error boundaries, and applying Suspense strategically. This separation improves bundle size, maintainability, and initial load performance.

Client components integrate seamlessly with state management libraries. Server components handle data fetching and don't use traditional state management. Combine server-side data passing with client-side state for hybrid architectures that maximize performance.