Server Components, streaming, partial prerendering — here's how we actually use the Next.js App Router to hit Lighthouse 95+ on every client site.
Hype is cheap. Lighthouse scores are real. To maintain our standard of delivering premium, high-performance web products, we have optimized our Next.js architecture around the core primitives of React Server Components (RSC).
Next.js App Router is a powerful foundation, but default behaviors can easily lead to layout shifts, heavy hydration payloads, and slow TTFB if not handled carefully.
1. Server-First Mentality: Keep your state local and interactive. Wrap only the atomic elements (like a search bar or collapsible sidebar) in client components. The main shell, layout, and copy should remain zero-JS server HTML.
2. Streaming and Suspense boundaries: Never let a slow database query block page load. Use Suspense to render shell skeletons instantly while data streams in over the edge.
3. Resource Pre-loading and pre-connection: Ensure critical fonts and scripts are preloaded and external CDN endpoints have preconnect links to save precious milliseconds during DNS resolution.