Parallel and Sequential Data Fetching

async function DashboardPage() {
  // Fetch multiple independent data sources in parallel
  const [user, stats, recentOrders, notifications] = await Promise.all([
    fetch('https://api.example.com/user').then(r => r.json()),
    fetch('https://api.example.com/stats').then(r => r.json()),
    fetch('https://api.example.com/orders/recent').then(r => r.json()),
    fetch('https://api.example.com/notifications').then(r => r.json()),
  ]);

  return (
    <div className="dashboard">
      <UserProfile user={user} />
      <StatsGrid stats={stats} />
      <RecentOrders orders={recentOrders} />
      <NotificationList notifications={notifications} />
    </div>
  );
}

// ✅ All 4 requests start simultaneously
// ✅ Total time = slowest request
// ✅ Much faster than sequential

async function ProductsPage() {
  // Start all requests simultaneously
  const productsPromise = fetch('https://api.example.com/products')
    .then(r => r.json());
  
  const categoriesPromise = fetch('https://api.example.com/categories')
    .then(r => r.json());
  
  const featuredPromise = fetch('https://api.example.com/products/featured')
    .then(r => r.json());

  // Wait for all to complete
  const [products, categories, featured] = await Promise.all([
    productsPromise,
    categoriesPromise,
    featuredPromise,
  ]);

  return (
    <div>
      <FeaturedProducts products={featured} />
      <CategoryFilter categories={categories} />
      <ProductGrid products={products} />
    </div>
  );
}

// ✅ More explicit - shows intent clearly
// ✅ Easy to add more requests
// ✅ Same performance as previous pattern

// Reusable fetch functions
export async function getUser(id: string) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) throw new Error('Failed to fetch user');
  return res.json();
}

export async function getUserPosts(userId: string) {
  const res = await fetch(`https://api.example.com/users/${userId}/posts`);
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

export async function getUserFollowers(userId: string) {
  const res = await fetch(`https://api.example.com/users/${userId}/followers`);
  if (!res.ok) throw new Error('Failed to fetch followers');
  return res.json();
}

import { getUser, getUserPosts, getUserFollowers } from '@/lib/api';

async function ProfilePage({ params }: { params: { id: string } }) {
  // Fetch all data in parallel using reusable functions
  const [user, posts, followers] = await Promise.all([
    getUser(params.id),
    getUserPosts(params.id),
    getUserFollowers(params.id),
  ]);

  return (
    <div className="profile">
      <ProfileHeader user={user} followerCount={followers.length} />
      <PostList posts={posts} />
      <FollowerList followers={followers} />
    </div>
  );
}

export default ProfilePage;

// ✅ Clean, reusable functions
// ✅ Type-safe
// ✅ Parallel execution
// ✅ Easy to test

interface Product {
  id: string;
  title: string;
  price: number;
  description: string;
  category: string;
}

interface Review {
  id: string;
  rating: number;
  comment: string;
  author: string;
}

interface RelatedProduct {
  id: string;
  title: string;
  price: number;
  image: string;
}

async function ProductPage({ params }: { params: { id: string } }) {
  // Fetch 4 independent data sources in parallel
  const [product, reviews, relatedProducts, inventory] = await Promise.all([
    // Product details
    fetch(`https://api.example.com/products/${params.id}`)
      .then(r => r.json()) as Promise<Product>,
    
    // Product reviews
    fetch(`https://api.example.com/products/${params.id}/reviews`)
      .then(r => r.json()) as Promise<Review[]>,
    
    // Related products
    fetch(`https://api.example.com/products/${params.id}/related`)
      .then(r => r.json()) as Promise<RelatedProduct[]>,
    
    // Inventory status
    fetch(`https://api.example.com/products/${params.id}/inventory`)
      .then(r => r.json()),
  ]);

  // Calculate average rating
  const avgRating = reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length;

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Product Info */}
        <div>
          <h1 className="text-4xl font-bold mb-4">{product.title}</h1>
          <div className="flex items-center gap-2 mb-4">
            <span className="text-2xl">⭐</span>
            <span className="text-lg font-semibold">
              {avgRating.toFixed(1)} ({reviews.length} reviews)
            </span>
          </div>
          <p className="text-3xl text-green-600 mb-6">${product.price}</p>
          <p className="text-gray-700 mb-6">{product.description}</p>
          
          {/* Inventory Status */}
          <div className="mb-6">
            {inventory.inStock ? (
              <span className="text-green-600 font-semibold">
                ✓ In Stock ({inventory.quantity} available)
              </span>
            ) : (
              <span className="text-red-600 font-semibold">Out of Stock</span>
            )}
          </div>
          
          <button className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold">
            Add to Cart
          </button>
        </div>

        {/* Product Image */}
        <div>
          <img 
            src={product.image} 
            alt={product.title}
            className="w-full rounded-lg"
          />
        </div>
      </div>

      {/* Reviews Section */}
      <div className="mt-12">
        <h2 className="text-2xl font-bold mb-6">Customer Reviews</h2>
        <div className="space-y-4">
          {reviews.map(review => (
            <div key={review.id} className="border rounded-lg p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-yellow-500">{'⭐'.repeat(review.rating)}</span>
                <span className="font-semibold">{review.author}</span>
              </div>
              <p className="text-gray-700">{review.comment}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Related Products */}
      <div className="mt-12">
        <h2 className="text-2xl font-bold mb-6">You May Also Like</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {relatedProducts.map(related => (
            <a 
              key={related.id} 
              href={`/products/${related.id}`}
              className="border rounded-lg p-4 hover:shadow-lg transition"
            >
              <img 
                src={related.image} 
                alt={related.title}
                className="w-full h-48 object-cover rounded mb-3"
              />
              <h3 className="font-semibold mb-2">{related.title}</h3>
              <p className="text-green-600">${related.price}</p>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

export default ProductPage;

// ✅ 4 requests in parallel
// ✅ Page loads 70-80% faster than sequential
// ✅ All data available immediately
// ✅ Better user experience

async function UserPage({ params }: { params: { id: string } }) {
  // Step 1: Get user data first
  const user = await fetch(`https://api.example.com/users/${params.id}`)
    .then(r => r.json());

  // Step 2: Get user's posts (depends on user data)
  // We need user.postsUrl or specific user info
  const posts = await fetch(
    `https://api.example.com/users/${user.id}/posts?lang=${user.preferredLanguage}`
  ).then(r => r.json());

  // Step 3: Get post statistics (depends on post IDs)
  const postIds = posts.map(p => p.id).join(',');
  const analytics = await fetch(
    `https://api.example.com/analytics?postIds=${postIds}`
  ).then(r => r.json());

  return (
    <div>
      <UserProfile user={user} />
      <PostList posts={posts} analytics={analytics} />
    </div>
  );
}

// ⏱️ Slower, but necessary
// ✅ Each request needs data from the previous one
// ✅ Cannot be parallelized

interface Team {
  id: string;
  name: string;
  memberIds: string[];
}

interface Member {
  id: string;
  name: string;
  email: string;
}

interface Project {
  id: string;
  title: string;
  status: string;
}

async function TeamPage({ params }: { params: { teamId: string } }) {
  // Level 1: Get team info
  const team: Team = await fetch(
    `https://api.example.com/teams/${params.teamId}`
  ).then(r => r.json());

  // Level 2: Get team members (needs team.memberIds)
  const members: Member[] = await fetch(
    `https://api.example.com/users?ids=${team.memberIds.join(',')}`
  ).then(r => r.json());

  // Level 3: Get each member's projects (needs member IDs)
  // This CAN be parallelized since all member requests are independent
  const projectsPromises = members.map(member =>
    fetch(`https://api.example.com/users/${member.id}/projects`)
      .then(r => r.json())
  );
  const allProjects: Project[][] = await Promise.all(projectsPromises);

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">{team.name}</h1>
      
      <div className="space-y-8">
        {members.map((member, index) => (
          <div key={member.id} className="border rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-2">{member.name}</h2>
            <p className="text-gray-600 mb-4">{member.email}</p>
            
            <h3 className="font-semibold mb-2">Projects:</h3>
            <div className="space-y-2">
              {allProjects[index].map(project => (
                <div key={project.id} className="flex items-center gap-2">
                  <span className="font-medium">{project.title}</span>
                  <span className={
                    project.status === 'active' 
                      ? 'text-green-600' 
                      : 'text-gray-500'
                  }>
                    • {project.status}
                  </span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TeamPage;

// Step 1: Team (sequential - must be first)
// Step 2: Members (sequential - needs team.memberIds)
// Step 3: Projects (parallel - all independent)
// ✅ Optimized: Sequential where needed, parallel where possible

async function AdvancedDashboard() {
  // Group 1: Initial data (parallel)
  const [user, config] = await Promise.all([
    fetch('https://api.example.com/user').then(r => r.json()),
    fetch('https://api.example.com/config').then(r => r.json()),
  ]);

  // Group 2: User-specific data (parallel, but depends on user)
  const [posts, followers, notifications] = await Promise.all([
    fetch(`https://api.example.com/users/${user.id}/posts`).then(r => r.json()),
    fetch(`https://api.example.com/users/${user.id}/followers`).then(r => r.json()),
    fetch(`https://api.example.com/users/${user.id}/notifications`).then(r => r.json()),
  ]);

  // Group 3: Analytics (parallel, depends on posts)
  const postIds = posts.map(p => p.id);
  const [analytics, engagement] = await Promise.all([
    fetch(`https://api.example.com/analytics?postIds=${postIds.join(',')}`)
      .then(r => r.json()),
    fetch(`https://api.example.com/engagement?postIds=${postIds.join(',')}`)
      .then(r => r.json()),
  ]);

  return (
    <div className="dashboard">
      <UserHeader user={user} />
      <PostGrid posts={posts} analytics={analytics} />
      <EngagementStats engagement={engagement} />
      <FollowerList followers={followers} />
      <NotificationCenter notifications={notifications} />
    </div>
  );
}

// Timeline:
// Group 1: user + config (parallel) - 500ms
// Group 2: posts + followers + notifications (parallel) - 800ms
// Group 3: analytics + engagement (parallel) - 600ms
// Total: 500 + 800 + 600 = 1900ms
//
// If all sequential: 500 + 400 + 600 + 300 + 800 + 600 = 3200ms
// Savings: 1300ms (40% faster!)

async function ArticlePage({ params }: { params: { slug: string } }) {
  // Critical: Get article first (user needs to see content)
  const article = await fetch(
    `https://api.example.com/articles/${params.slug}`
  ).then(r => r.json());

  // Non-critical: Get supplementary data in parallel
  // These enhance the experience but aren't essential
  const [author, relatedArticles, comments] = await Promise.all([
    fetch(`https://api.example.com/users/${article.authorId}`)
      .then(r => r.json()),
    fetch(`https://api.example.com/articles/${params.slug}/related`)
      .then(r => r.json()),
    fetch(`https://api.example.com/articles/${params.slug}/comments`)
      .then(r => r.json()),
  ]);

  return (
    <article className="container mx-auto px-4 py-8">
      {/* Critical content - shows first */}
      <h1 className="text-4xl font-bold mb-4">{article.title}</h1>
      <div 
        className="prose prose-lg mb-8"
        dangerouslySetInnerHTML={{ __html: article.content }}
      />

      {/* Supplementary content */}
      <AuthorBio author={author} />
      <RelatedArticles articles={relatedArticles} />
      <CommentSection comments={comments} />
    </article>
  );
}

// ✅ Article content available quickly
// ✅ Supplementary data loads in parallel
// ✅ Optimized for user experience

// ✅ GOOD: Parallel by default
const [a, b, c] = await Promise.all([getA(), getB(), getC()]);

// ❌ BAD: Sequential without reason
const a = await getA();
const b = await getB();
const c = await getC();

// ✅ GOOD: Clear dependencies
const user = await getUser(id);        // Must be first
const [posts, followers] = await Promise.all([
  getUserPosts(user.id),               // Depends on user
  getUserFollowers(user.id),           // Depends on user
]);

// Both posts and followers depend on user but not each other
// So fetch them in parallel after getting user

// ✅ GOOD: Critical content first
const article = await getArticle(slug);  // Critical
const [comments, related] = await Promise.all([
  getComments(slug),                     // Nice to have
  getRelated(slug),                      // Nice to have
]);

// User sees article quickly, supplementary data loads in parallel

// ✅ GOOD: Each request handles its own errors
const [user, posts, notifications] = await Promise.all([
  getUser(id),
  getUserPosts(id).catch(() => []),              // Return empty array on error
  getNotifications(id).catch(() => []),          // Don't fail entire page
]);

// If posts fail, page still works with user and notifications

// When some requests might fail but page should still work
const results = await Promise.allSettled([
  fetch('https://api.example.com/critical'),
  fetch('https://api.example.com/optional1'),
  fetch('https://api.example.com/optional2'),
]);

// Check each result
const critical = results[0].status === 'fulfilled' 
  ? await results[0].value.json() 
  : null;

const optional1 = results[1].status === 'fulfilled'
  ? await results[1].value.json()
  : null;

// Page works even if optional requests fail