pn-nextjs

Next.js best practices

Server vs Client Components

• Server components by default. Every component in the app/ directory is a Server Component unless it has "use client" at the top.
• "use client" only when needed: interactivity (useState, useEffect), browser APIs (window, document), event listeners, or third-party client-side libraries.
• Keep "use client" as deep in the tree as possible — push it to leaf components. A parent Server Component can pass Server data as props to a Client Component child.
• Never import a Server Component into a Client Component. Pass Server-rendered content as children or other props instead.

Data Loading

• No request waterfalls: Parallel-fetch independent data with Promise.all() in server components. Don't await one then the other if they're independent.
• Colocate data fetching: Fetch data in the Server Component that needs it — don't fetch in a parent and prop-drill, because Server Components don't cause re-renders.
• cache() for deduplication: In Server Components, cache() deduplicates identical requests within a single render pass.
• Streaming with Suspense: Wrap slow-loading sections in <Suspense fallback={<Skeleton />}> to stream content progressively rather than blocking the whole page.

Loading, Error, and Not-Found States

• Colocate loading.tsx with every async route segment — it creates an automatic Suspense boundary and shows a skeleton during navigation.
• Colocate error.tsx with routes that may throw — it must be a Client Component ("use client"); use it to show a recovery UI.
• not-found.tsx for 404 states; call notFound() from server components when a resource doesn't exist.
• Never leave an async route without a loading.tsx — users see a blank screen on navigation otherwise.

Server Actions and Mutations

• After a Server Action mutation, call revalidatePath('/path') or revalidateTag('tag') so cached data is updated and the UI reflects the change.
• Use useActionState (React 19 / Next 15) to track loading and error state for Server Actions.
• Validate inputs server-side in every Server Action — never trust client data.
• Return structured errors from Server Actions instead of throwing, so the UI can display them inline.