nextjs-modern

Modern Next.js (App Router)

Default to the server. Reach for the client only when you need interactivity. Target Next.js 16 with the App Router and React Server Components.

When to use

• Adding or reviewing routes, layouts, pages, or components in the frontend app.
• Choosing server vs client components, a data-fetching strategy, or caching.
• Wiring forms and mutations via Server Actions.

Server vs Client Components

Components are Server Components by default. Add 'use client' only when you need state, effects, event handlers, or browser-only APIs.

• Keep 'use client' at the leaves; pass server-fetched data down as props.
• Don't put 'use client' on a layout/page just to use one interactive child — split the child out.
• Never import server-only code (DB clients, secrets) into a client component.
• Minimize the serialization boundary: props crossing server → client are serialized into the RSC payload. Pass only the minimal, serializable fields a client component needs — not whole ORM rows or large objects. Non-serializable values (functions, class instances, Dates in some setups) won't cross.

Data fetching

• Fetch directly in async Server Components — no useEffect for initial data.
• Choose the cache explicitly: static by default, revalidate for ISR, cache: 'no-store' / dynamic for per-request data.
• Stream slow data with <Suspense> and loading.tsx; colocate error.tsx.
• Use next/cache (revalidateTag/revalidatePath) to invalidate after writes.

Avoid request waterfalls

• Fetch independent data in parallel, not sequentially. Kick off the requests, then await together:

const [user, posts] = await Promise.all([getUser(id), getPosts(id)]);

• Don't await a request only to pass its result into the next independent one — that serializes round-trips and inflates TTFB.
• Stream non-critical sections behind their own <Suspense> so the shell renders immediately.

Deduplicate requests