Next.js & React Best Practices

Provides production-grade patterns for React and Next.js applications using the App Router, covering rendering strategies, data fetching, state management, and performance optimization ordered by impact.

Rendering Strategy: Server First

Default to Server Components. Move to Client Components only when the component requires browser APIs, event listeners, or React hooks (useState, useEffect).

// Server Component (default) - no 'use client' directive needed
async function ProductList() {
  const products = await db.products.findMany() // direct DB access
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}