react-nextjs

Next.js App Router defaults to server components to minimize client JS. You must explicitly add the 'use client' directive to establish client boundaries for interactive UI elements, ensuring safe data flow patterns across your application architecture.

Zustand manages shared UI state across routes by creating a global store accessible from client components. This approach avoids excessive prop drilling and maintains consistent state synchronization throughout your Next.js application component tree.

Data fetching in Next.js server components leverages the App Router's built-in caching mechanisms. You fetch data directly within server components and pass it as props to client components, establishing safe data flow patterns without over-fetching on the client.

Dynamic imports for large libraries in Next.js reduce initial client-side JavaScript bundles. You should dynamically import heavy client-side dependencies only when needed within explicit client boundaries to optimize application loading performance.

Zustand requires client-side rendering and fails in Next.js server components by default. You must encapsulate Zustand state management within explicit client boundaries marked by the 'use client' directive to avoid common server-side execution pitfalls.