Data Fetching Without Waterfalls

// Simulated API calls with realistic delays
// In production, these would be actual fetch calls to your API
 
export async function fetchUser(): Promise<{ name: string; email: string }> {
  await new Promise((resolve) => setTimeout(resolve, 200));
  return { name: "John Doe", email: "john@example.com" };
}
 
export async function fetchPosts(): Promise<Array<{ id: number; title: string }>> {
  await new Promise((resolve) => setTimeout(resolve, 300));
  return [
    { id: 1, title: "Getting Started with Next.js" },
    { id: 2, title: "Server Components Deep Dive" },
    { id: 3, title: "Caching Strategies" },
  ];
}
 
export async function fetchStats(): Promise<{ views: number; likes: number }> {
  await new Promise((resolve) => setTimeout(resolve, 250));
  return { views: 1234, likes: 567 };
}

import { fetchPosts, fetchStats, fetchUser } from "./data";
 
// Parallel fetch with timing measurement
async function fetchParallel() {
  const startTime = performance.now();
 
  // Promise.all runs all fetches simultaneously
  // Total time = max(200, 300, 250) = ~300ms instead of 750ms sequential
  const [user, posts, stats] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchStats(),
  ]);
 
  const endTime = performance.now();
  const duration = Math.round(endTime - startTime);
 
  return { user, posts, stats, duration };
}
 
export default async function DataDemoPage() {
  const { user, posts, stats, duration } = await fetchParallel();
 
  return (
    <main className="mx-auto max-w-2xl p-8">
      <h1 className="mb-6 font-bold text-3xl">
        Data Fetching Without Waterfalls
      </h1>
 
      {/* Performance result banner */}
      <div className="mb-6 rounded-lg border-2 border-green-200 bg-green-50 p-4">
        <h2 className="font-semibold text-green-800">Performance Result</h2>
        <p className="text-green-700">
          Parallel fetch completed in{" "}
          <span className="font-bold font-mono">{duration}ms</span>
        </p>
        <p className="mt-2 text-green-600 text-sm">
          Sequential would take ~750ms (200 + 300 + 250ms). Parallel takes
          ~300ms (max of all three).
        </p>
      </div>
 
      <div className="space-y-6">
        {/* User data */}
        <div className="rounded-lg border p-4">
          <h2 className="mb-2 font-semibold">User (200ms fetch)</h2>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
 
        {/* Posts data */}
        <div className="rounded-lg border p-4">
          <h2 className="mb-2 font-semibold">Posts (300ms fetch)</h2>
          <ul className="list-inside list-disc">
            {posts.map((post) => (
              <li key={post.id}>{post.title}</li>
            ))}
          </ul>
        </div>
 
        {/* Stats data */}
        <div className="rounded-lg border p-4">
          <h2 className="mb-2 font-semibold">Stats (250ms fetch)</h2>
          <p>Views: {stats.views.toLocaleString()}</p>
          <p>Likes: {stats.likes.toLocaleString()}</p>
        </div>
      </div>
 
      {/* Code comparison */}
      <div className="mt-8 rounded bg-gray-100 p-4">
        <h3 className="mb-2 font-semibold">Key Takeaway</h3>
        <pre className="overflow-x-auto font-mono text-sm">
          {`// ❌ Sequential (750ms total)
const user = await fetchUser();    // 200ms
const posts = await fetchPosts();  // 300ms
const stats = await fetchStats();  // 250ms
 
// ✅ Parallel (300ms total)
const [user, posts, stats] = await Promise.all([
  fetchUser(),    // All run
  fetchPosts(),   // simultaneously
  fetchStats(),   // max(200,300,250) = 300ms
]);`}
        </pre>
      </div>
    </main>
  );
}

import { fetchPosts, fetchUser, fetchUserStats } from "@/lib/data";
 
interface PageProps {
  params: Promise<{ id: string }>;
}
 
export default async function UserPage({ params }: PageProps) {
  // Include params in Promise.all for optimal performance
  const [{ id }, user, posts, stats] = await Promise.all([
    params, // Await params alongside data fetches
    fetchUser(), // These run in parallel with params resolution
    fetchPosts(),
    fetchUserStats(),
  ]);
 
  // Now use id for any dependent fetches
  // (Better: restructure so all independent fetches are in Promise.all)
 
  return (
    <main className="mx-auto max-w-2xl p-8">
      <h1 className="mb-4 font-bold text-2xl">User {id}</h1>
      <p>{user.name}</p>
      {/* ... */}
    </main>
  );
}

async function fetchDashboardData() {
  const results = await Promise.allSettled([
    fetchUser(),
    fetchPosts(),
    fetchStats(),
  ]);
 
  // Extract successful results, provide fallbacks for failures
  const user = results[0].status === "fulfilled"
    ? results[0].value
    : { name: "Guest", email: "" };
 
  const posts = results[1].status === "fulfilled"
    ? results[1].value
    : [];
 
  const stats = results[2].status === "fulfilled"
    ? results[2].value
    : { views: 0, likes: 0 };
 
  // Log failures for monitoring (add biome-ignore if using console.log)
  results.forEach((result, index) => {
    if (result.status === "rejected") {
      // biome-ignore lint/suspicious/noConsole: monitoring
      console.error(`Fetch ${index} failed:`, result.reason);
    }
  });
 
  return { user, posts, stats };
}