Technical House
WEB

Next.js App Router: a mental model that sticks

Server Components, client boundaries, caching, and when to force dynamic — without cargo-culting.

Published · Updated · 14 min read

Default to the server

Fetch close to the data on the server. Push interactivity to small client islands. Huge “use client” pages defeat the point of RSC.

Pass serializable props across the boundary. Functions and class instances do not travel.

Caching is a product decision

Static where content is public and slow-changing. Dynamic where personalization or freshness matters. revalidate is a dial, not a religion.

If the homepage looks empty because an aggregate API failed, add static fallbacks — users should still see value.

Loading and error UX

loading.tsx and error.tsx exist so routes feel intentional. Empty black pages train users to bounce — and ad networks notice thin experiences.

#nextjs#rsc#routing

Never miss a drop

Get new guides on web development and AI, Prompt Lab tips, videos, downloads and exclusive deals — straight to your inbox. No spam, unsubscribe anytime.