react-best-practices

Optimize React and Next.js performance by applying server-first data fetching patterns. This approach prioritizes server-side rendering and data retrieval to minimize sequential client requests, reducing waterfalls and improving Time To Interactive.

Use server components for data fetching by default to reduce bundle size and secure data access. Shift to client fetches or TanStack Query only when interactive client-side state management is explicitly required.

The best way to refactor for Time To Interactive is applying prioritized performance patterns across data fetching, routing, and bundling. Enforce safe refactor guidelines and robust error handling to systematically reduce bundle sizes and eliminate render waterfalls.

Manage client state without increasing bundle size by isolating interactive logic and using TanStack Query for client fetches. Keep static data processing in server components and route handlers to prevent unnecessary JavaScript from shipping to the client.

Yes, the performance patterns explicitly cover using route handlers and URL params. The guidance spans the full spectrum from server-first rendering and URL parameters to client fetches, ensuring robust data fetching architecture across your Next.js application.