react-best-practices

Search for "use client" occurrences with ripgrep and check whether each component actually needs state, effects, browser APIs, or event handlers. Layouts and pages marked client just for one interactive child should push the boundary to a leaf component instead.

Move data fetching into async Server Components and use Promise.all for parallel requests instead of sequential awaits. Colocate fetching with the component that needs the data and use React.cache() for deduplication within a request.

Yes, server actions marked with "use server" handle mutations, but input must be validated server-side with zod or valibot since client validation is only UX. Actions should return structured results and call revalidatePath or revalidateTag after mutations.

Common causes are full-library imports like lodash or moment (~70KB each), entire icon packs, and heavy UI frameworks imported at the root. Use ANALYZE=true npx next build to visualize contributors, then apply path-specific imports and dynamic imports for heavy components.

Components needing useState, useEffect, useRef, browser APIs like window or localStorage, or event handlers like onClick must remain Client Components. The goal is pushing the client boundary to leaf components, not eliminating it entirely.