Next.js App Router Production Architecture: Server Components, Streaming & Cache Invalidation

import { Suspense } from 'react';
import { getWorkspaceSummary, getRealtimeCampaignMetrics } from '@/lib/data/workspace';
import { InteractiveFunnelChart } from '@/components/charts/InteractiveFunnelChart';

export default async function WorkspaceAnalyticsPage({
  params
}: {
  params: Promise<{ workspaceId: string }>;
}) {
  const { workspaceId } = await params;
  // Initiate both queries in parallel on the server to prevent request waterfalls
  const summaryPromise = getWorkspaceSummary(workspaceId);
  const metricsPromise = getRealtimeCampaignMetrics(workspaceId);

  const summary = await summaryPromise;

  return (
    <main className="space-y-8">
      <header>
        <h1 className="text-2xl font-bold">{summary.name} — Performance Cockpit</h1>
        <p className="text-sm text-neutral-400">Active Pipeline: {summary.activeCampaigns} campaigns</p>
      </header>
      <Suspense fallback={<div className="h-80 animate-pulse rounded-xl bg-neutral-900" />}>
        <StreamedMetricsSection metricsPromise={metricsPromise} />
      </Suspense>
    </main>
  );
}

async function StreamedMetricsSection({
  metricsPromise
}: {
  metricsPromise: ReturnType<typeof getRealtimeCampaignMetrics>;
}) {
  const metrics = await metricsPromise;
  return <InteractiveFunnelChart data={metrics.series} />;
}

Demonstrates parallel promise initiation in an async Server Component paired with Suspense streaming so the header renders immediately while heavier telemetry streams in.