The Next.js App Router fundamentally changes how you build React applications with server-first rendering and fine-grained caching.

Server Components by Default

// app/dashboard/page.tsx - Server Component (no 'use client')
import { prisma } from '@/lib/prisma'

export default async function DashboardPage() {
  const projects = await prisma.project.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  })

  return (
    <div>
      <h1>Dashboard</h1>
      {projects.map(p => <ProjectCard key={p.id} project={p} />)}
    </div>
  )
}

Streaming with Suspense

import { Suspense } from 'react'

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<StatsSkeleton />}>
        <StatsPanel />
      </Suspense>
      <Suspense fallback={<ProjectsSkeleton />}>
        <ProjectsList />
      </Suspense>
    </div>
  )
}

Server Actions

'use server'
import { revalidatePath } from 'next/cache'

export async function createProject(formData: FormData) {
  await prisma.project.create({
    data: { name: formData.get('name') as string },
  })
  revalidatePath('/dashboard')
}

Caching Strategies

Use revalidatePath, revalidateTag, and unstable_cache for fine-grained cache control.

The Bottom Line

The SaaS Starter Kit from BreafIO is built on the App Router with Server Components. The Admin Dashboard Pro demonstrates streaming patterns. The API Boilerplate uses route handlers. The Analytics Dashboard showcases data fetching, and the Landing Page Bundle uses ISR for optimal performance.