Headless WordPress with Next.js SSG

import { Suspense } from 'react';
import { unstable_cache as cache } from 'next/cache';

// Cached database query with tag-based invalidation
const getMetrics = cache(
  async (tenantId: string) => {
    const res = await db.query.metrics.findMany({
      where: eq(metrics.tenantId, tenantId),
      limit: 50,
    });
    return res;
  },
  ['tenant-metrics'],
  { revalidate: 60, tags: ['metrics-tag'] }
);

export default async function DashboardPage({ params }: { params: { tenant: string } }) {
  return (
    <main className="p-8 max-w-7xl mx-auto space-y-6">
      <header className="flex justify-between items-center">
        <h1 className="text-2xl font-bold tracking-tight">Enterprise Analytics</h1>
      </header>

      {/* Instant Shell Render (Eliminates LCP Waterfall) */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Suspense fallback={<MetricSkeleton />}>
          <LiveMetricCards tenant={params.tenant} />
        </Suspense>
      </div>

      {/* Heavy Data Table Streamed via Suspense Boundary */}
      <Suspense fallback={<TableSkeleton />}>
        <AsyncDataTable tenant={params.tenant} />
      </Suspense>
    </main>
  );
}

async function LiveMetricCards({ tenant }: { tenant: string }) {
  const data = await getMetrics(tenant);
  return <MetricCards data={data} />;
}