React 19 & Next.js Architecture: The T3 Stack Deep-Dive

import { Suspense } from 'react';
import { prisma } from '@/server/db';
import { SkeletonGrid } from '@/components/ui/skeleton-grid';
import { VirtualizedOrderTable } from './order-table-client';
import { revalidateTag } from 'next/cache';

interface PageProps {
  searchParams: Promise<{ tenantId?: string; status?: string }>;
}

async function OrdersDataLoader({ tenantId, status }: { tenantId: string; status?: string }) {
  // Direct Server Component DB Execution — 0 client bundle overhead
  const orders = await prisma.order.findMany({
    where: {
      tenantId,
      ...(status ? { status } : {}),
    },
    select: {
      id: true,
      orderNumber: true,
      totalAmount: true,
      status: true,
      createdAt: true,
      customer: { select: { name: true, email: true } },
    },
    orderBy: { createdAt: 'desc' },
    take: 500,
  });

  return <VirtualizedOrderTable initialData={orders} />;
}

export default async function OrdersPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const tenantId = params.tenantId ?? 'default-tenant';

  return (
    <section className="flex flex-col gap-6 p-8">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900">Order Telemetry</h1>
      </div>

      <Suspense fallback={<SkeletonGrid rows={10} cols={5} />}>
        <OrdersDataLoader tenantId={tenantId} status={params.status} />
      </Suspense>
    </section>
  );
}