Next.js Data Fetching
Audits server/client data-fetching patterns: fetch usage, cache directives, parallel/sequential calls, error handling.
Data fetching in Next.js spans multiple paradigms — fetch with cache options, Server Components, route handlers, server actions, and client-side hooks — each with different performance and consistency tradeoffs. Mismatched patterns (e.g., client-side fetching inside a Server Component) waste rendering work and ship more JavaScript than necessary. This analysis flags patterns that conflict with the file's detected role.
Severity guide
- info
- A minor optimization opportunity is available.
- warning
- A data-fetching pattern conflicts with the file role or misses an obvious optimization.
- critical
- A pattern actively breaks expected behavior (e.g., fetch without error handling in a critical path).
Remediation
Align the fetch pattern with the file role (Server vs Client Component). Add cache directives where they help, error handling where needed, and parallelize independent requests.
Read the issue message — it identifies the specific anti-pattern. Common fixes: switch from useEffect+fetch to Server Component fetching, add { cache: "no-store" } or revalidate directives, replace sequential awaits with Promise.all for independent calls.