Beyond the API: Why Fast Backends Still Produce Slow React UIs

// app/dashboard/page.tsx (React Server Component)
import { Suspense } from "react";
import { DashboardShell } from "@/components/DashboardShell";
import { AnalyticsChartSkeleton, ChartSection } from "@/components/ChartSection";
import { RecentActivityList } from "@/components/RecentActivityList";

export default async function DashboardPage() {
  return (
    <DashboardShell>
      {/* 1. Fast Shell renders immediately without blocking */}
      <h1 className="font-display text-2xl font-bold">Analytics Overview</h1>

      {/* 2. Heavy async reads stream progressively behind Suspense */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        <div className="md:col-span-2">
          <Suspense fallback={<AnalyticsChartSkeleton />}>
            <ChartSection />
          </Suspense>
        </div>

        <div>
          <Suspense fallback={<div className="h-64 animate-pulse bg-paper/60 rounded-xl" />}>
            <RecentActivityList />
          </Suspense>
        </div>
      </div>
    </DashboardShell>
  );
}

// 1. Server Action for safe database mutation
"use server";
import { revalidatePath } from "next/cache";

export async function toggleBookmarkAction(id: string, currentState: boolean) {
  try {
    await db.bookmarks.updateOne({ id }, { $set: { saved: !currentState } });
    revalidatePath("/dashboard");
    return { success: true };
  } catch (error) {
    throw new Error("Failed to update bookmark");
  }
}

// 2. Interactive Island with React 19 useOptimistic
"use client";
import { useOptimistic, useTransition } from "react";
import { toggleBookmarkAction } from "./actions";

export function BookmarkButton({ id, initialSaved }: { id: string; initialSaved: boolean }) {
  const [isPending, startTransition] = useTransition();
  const [optimisticSaved, setOptimisticSaved] = useOptimistic(
    initialSaved,
    (state, newState: boolean) => newState
  );

  const handleClick = () => {
    startTransition(async () => {
      // Instant visual feedback (0ms perceived latency)
      setOptimisticSaved(!optimisticSaved);
      try {
        await toggleBookmarkAction(id, optimisticSaved);
      } catch (err) {
        // Automatic rollback handled if server action throws
        console.error("Mutation failed", err);
      }
    });
  };

  return (
    <button
      onClick={handleClick}
      aria-label={optimisticSaved ? "Remove bookmark" : "Save bookmark"}
      className={`transition ${optimisticSaved ? "text-accent" : "text-ink/40"}`}
    >
      <BookmarkIcon filled={optimisticSaved} />
    </button>
  );
}