react-server-components

To define component boundaries in Next.js App Router, use server components by default for data fetching and sensitive logic, and add the 'use client' directive only when interactive UI requires event handling or hooks. This minimizes client bundle size.

You implement streaming dashboards with Suspense in Next.js by wrapping independently loading UI sections in Suspense boundaries. This progressively streams server-rendered sections to the client alongside loading skeletons, improving perceived performance.

The best way to fetch data in React Server Components is directly within server components. Use Promise.all for parallel requests to minimize waterfalls, and handle dependent fetches sequentially where one request relies on another's output.

To use server actions for form mutations in Next.js, implement the useActionState pattern for submissions. Trigger data revalidation after updates via fetch options or tags to refresh cached server data without manual client-side syncing.

To pass data from server components to client components in Next.js, ensure the server data is fully serializable. Pass only serializable props across the server-client boundary to maintain safe composition and prevent hydration errors.

You should add authentication checks in server components and Next.js layouts to protect sensitive logic. Keeping authentication server-side ensures secure access control before rendering pages and prevents exposing sensitive logic to the client.