Why We Build Everything on Next.js App Router

Our Default Stack Decision

When a new client project kicks off, the first question is always the same: what stack? For us, the answer has been Next.js App Router for the past year, and it hasn't let us down once.

Here's why.

React Server Components Changed Everything

RSCs aren't just a new API—they fundamentally change how web applications work. Components run on the server, stream HTML to the browser, and ship zero client-side JavaScript by default.

What This Means in Practice

1. Zero bundle cost — server components don't add to your JS payload
2. Direct data access — query databases without API routes
3. Better security — sensitive logic never reaches the client
4. Instant loads — HTML arrives ready to render, no hydration delay

Before and After

The old way required client-side fetching, loading states, and error boundaries for every data-dependent component:

"use client";
export function BlogList() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch("/api/posts").then(res => res.json()).then(setPosts);
  }, []);
  return posts.map(post => <Card key={post.id} post={post} />);
}

The new way is just... a function:

export async function BlogList() {
  const posts = await loadAllPosts();
  return posts.map(post => <Card key={post.id} post={post} />);
}

No client-side fetch. No loading spinner. No JavaScript shipped. Just fast HTML.

---

Streaming SSR: Progressive Rendering

Next.js streams your page progressively. The shell renders instantly, and slow components fill in as their data resolves.

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <Header /> {/* Renders immediately */}
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent /> {/* Streams in when ready */}
      </Suspense>
    </div>
  );
}

Users see meaningful content instantly, even when some data takes time to load.

Image Optimization That Just Works

The next/image component handles format conversion, lazy loading, and responsive sizing automatically:

<Image
  src="/blog/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority
  className="rounded-2xl"
/>

The Caching Layer

App Router's caching is multi-layered and powerful:

• Full Route Cache — static pages cached at build time
• Request Memoization — duplicate fetches deduplicate automatically
• Data Cache — server-side responses cache with configurable TTL
• Router Cache — client-side navigation uses cached data

For content-heavy sites like blogs and marketing pages, this means near-instant page loads after the first visit.

Real Numbers From Our Projects

After migrating client projects to App Router:

• FCP: 1.8s → 0.9s (50% faster)
• LCP: 2.5s → 1.2s (52% improvement)
• Bundle size: 280KB → 140KB (50% smaller)
• Lighthouse: 92 → 98

When Not to Use It

App Router isn't always the answer. Highly interactive applications with complex client state (think Figma, spreadsheets) still benefit from SPA patterns. But for content sites, dashboards, marketing pages, and most SaaS products, it's the clear winner.

Our Recommendation

If you're starting a new project or planning a migration:

1. Start new routes on App Router — don't rewrite everything at once
2. Default to server components — only add "use client" when you need interactivity
3. Invest in your content pipeline — MDX + RSC is a powerful combination
4. Measure everything — Lighthouse, Core Web Vitals, real user metrics

Need help with your Next.js project? We specialize in high-performance web applications.