React Server Components Expert

// app/dashboard/page.tsx - Server Component
import { Suspense } from 'react';
import { db } from '@/lib/db';

// Parallel data fetching
async function DashboardStats() {
  const [users, revenue, orders] = await Promise.all([
    db.user.count(),
    db.order.aggregate({ _sum: { total: true } }),
    db.order.count(),
  ]);
  
  return (
    <div className="grid grid-cols-3 gap-4">
      <StatCard label="Users" value={users} />
      <StatCard label="Revenue" value={revenue._sum.total} />
      <StatCard label="Orders" value={orders} />
    </div>
  );
}

// Sequential data fetching with dependency
async function UserDashboard({ userId }: { userId: string }) {
  // First fetch - user data
  const user = await db.user.findUnique({ where: { id: userId } });
  
  // Second fetch - depends on user data
  const userOrders = await db.order.findMany({
    where: { userId: user.id },
    orderBy: { createdAt: 'desc' },
    take: 10,
  });
  
  return (
    <div>
      <h1>{user.name}'s Dashboard</h1>
      <Suspense fallback={<OrdersSkeleton />}>
        <OrdersList orders={userOrders} />
      </Suspense>
    </div>
  );
}

// Streaming promise to Client Component
async function DashboardPage() {
  // Don't await - pass promise to Client Component
  const analyticsPromise = fetch('https://api.example.com/analytics', {
    next: { revalidate: 60 },
  });
  
  return (
    <div>
      <Suspense fallback={<StatsSkeleton />}>
        <DashboardStats />
      </Suspense>
      <Suspense fallback={<AnalyticsSkeleton />}>
        <AnalyticsClient analyticsPromise={analyticsPromise} />
      </Suspense>
    </div>
  );
}

export default DashboardPage;

// components/AnalyticsClient.tsx - Client Component
'use client';

import { use } from 'react';

export default function AnalyticsClient({ analyticsPromise }: { analyticsPromise: Promise<any> }) {
  const analytics = use(analyticsPromise);
  return <AnalyticsChart data={analytics} />;
}

// app/products/[id]/page.tsx - Server Component
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  
  // Fetch data on server
  const product = await db.product.findUnique({ where: { id } });
  const relatedProducts = await db.product.findMany({
    where: { categoryId: product.categoryId, NOT: { id } },
    take: 4,
  });
  
  return (
    <div>
      {/* Server Component renders immediately */}
      <ProductHeader product={product} />
      
      {/* Client Component with Server Components as children */}
      <ProductDetailsClient>
        {/* Server Components passed as children */}
        <ProductDescription product={product} />
        <ProductSpecs product={product} />
        <RelatedProducts products={relatedProducts} />
      </ProductDetailsClient>
      
      {/* Another Server Component */}
      <ProductReviews productId={id} />
    </div>
  );
}

// components/ProductDetailsClient.tsx - Client Component
'use client';

import { useState } from 'react';

export default function ProductDetailsClient({ children }: { children: React.ReactNode }) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
    <div>
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? 'Collapse' : 'Expand'} Details
      </button>
      {isExpanded && <div className="details">{children}</div>}
    </div>
  );
}

// components/ProductDescription.tsx - Server Component
async function ProductDescription({ product }: { product: Product }) {
  // Can fetch additional data
  const description = await db.productDescription.findUnique({
    where: { productId: product.id },
  });
  
  return <div className="description">{description.text}</div>;
}

// components/RelatedProducts.tsx - Server Component
async function RelatedProducts({ products }: { products: Product[] }) {
  return (
    <div className="related-products">
      <h3>Related Products</h3>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <Link href={`/products/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/actions.ts
'use server';

import { z } from 'zod';
import { revalidatePath, revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';

const createPostSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(10),
  category: z.enum(['tech', 'design', 'business']),
  tags: z.array(z.string()).max(5).optional(),
});

export async function createPost(formData: FormData) {
  // Authentication check
  const session = await auth();
  if (!session) {
    throw new Error('Unauthorized');
  }
  
  // Extract and validate data
  const rawData = {
    title: formData.get('title'),
    content: formData.get('content'),
    category: formData.get('category'),
    tags: formData.getAll('tags'),
  };
  
  // Validate with Zod
  const result = createPostSchema.safeParse(rawData);
  
  if (!result.success) {
    return {
      error: result.error.format(),
      success: false,
    };
  }
  
  const { title, content, category, tags } = result.data;
  
  try {
    // Create post
    const post = await db.post.create({
      data: {
        title,
        content,
        category,
        tags,
        authorId: session.userId,
      },
    });
    
    // Revalidate affected paths
    revalidatePath('/posts');
    revalidatePath(`/posts/${post.id}`);
    revalidateTag('posts');
    
    // Redirect to new post
    redirect(`/posts/${post.id}`);
  } catch (error) {
    return {
      error: 'Failed to create post',
      success: false,
    };
  }
}

export async function deletePost(postId: string) {
  const session = await auth();
  if (!session) {
    throw new Error('Unauthorized');
  }
  
  // Verify ownership
  const post = await db.post.findUnique({ where: { id: postId } });
  if (post.authorId !== session.userId) {
    throw new Error('Forbidden');
  }
  
  await db.post.delete({ where: { id: postId } });
  revalidatePath('/posts');
  revalidateTag('posts');
}

// app/new-post/page.tsx
'use client';

import { createPost } from '@/app/actions';
import { useFormStatus, useActionState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Creating...' : 'Create Post'}
    </button>
  );
}

export default function NewPost() {
  const [state, formAction] = useActionState(createPost, null);
  
  return (
    <form action={formAction}>
      <input name="title" required />
      <textarea name="content" required />
      <select name="category">
        <option value="tech">Tech</option>
        <option value="design">Design</option>
        <option value="business">Business</option>
      </select>
      {state?.error && (
        <div className="error">
          {JSON.stringify(state.error)}
        </div>
      )}
      <SubmitButton />
    </form>
  );
}

// app/dashboard/page.tsx - Server Component
export default function DashboardPage() {
  return (
    <div className="dashboard">
      {/* Static shell - renders immediately */}
      <header>
        <h1>Dashboard</h1>
        <nav>
          <Link href="/">Home</Link>
          <Link href="/settings">Settings</Link>
        </nav>
      </header>
      
      {/* Top-level Suspense - shows while sidebar and main content load */}
      <Suspense fallback={<DashboardSkeleton />}>
        <div className="dashboard-content">
          {/* Sidebar with nested Suspense */}
          <aside>
            <Suspense fallback={<SidebarSkeleton />}>
              <UserProfile />
            </Suspense>
            <Suspense fallback={<StatsSkeleton />}>
              <QuickStats />
            </Suspense>
          </aside>
          
          {/* Main content with nested Suspense */}
          <main>
            <Suspense fallback={<ChartSkeleton />}>
              <RevenueChart />
            </Suspense>
            <Suspense fallback={<TableSkeleton />}>
              <RecentOrders />
            </Suspense>
            <Suspense fallback={<ListSkeleton />}>
              <TopCustomers />
            </Suspense>
          </main>
        </div>
      </Suspense>
    </div>
  );
}

// Async Server Components - stream when data is ready
async function UserProfile() {
  const user = await db.user.findUnique({ where: { id: getCurrentUserId() } });
  return <UserProfileCard user={user} />;
}

async function QuickStats() {
  const stats = await fetch('https://api.example.com/stats', {
    next: { revalidate: 60 },
  });
  const data = await stats.json();
  return <StatsGrid data={data} />;
}

async function RevenueChart() {
  const data = await fetch('https://api.example.com/revenue', {
    next: { revalidate: 300 },
  });
  const chartData = await data.json();
  return <Chart data={chartData} />;
}

async function RecentOrders() {
  const orders = await db.order.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  });
  return <OrdersTable orders={orders} />;
}

async function TopCustomers() {
  const customers = await db.customer.findMany({
    orderBy: { totalSpent: 'desc' },
    take: 5,
  });
  return <CustomersList customers={customers} />;
}

// app/products/[id]/page.tsx - Server Component
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  
  // ISR with revalidation and tags
  const product = await fetch(`https://api.example.com/products/${id}`, {
    next: { 
      revalidate: 3600, // Revalidate every hour
      tags: ['products', `product-${id}`],
    },
  }).then(res => res.json());
  
  // Parallel data fetching with different cache strategies
  const [reviews, related, analytics] = await Promise.all([
    // Frequently updated - shorter revalidation
    fetch(`https://api.example.com/products/${id}/reviews`, {
      next: { revalidate: 300, tags: [`product-${id}-reviews`] },
    }).then(res => res.json()),
    
    // Less frequently updated - longer revalidation
    fetch(`https://api.example.com/products/${id}/related`, {
      next: { revalidate: 1800, tags: [`product-${id}-related`] },
    }).then(res => res.json()),
    
    // Static data - long revalidation
    fetch(`https://api.example.com/products/${id}/analytics`, {
      next: { revalidate: 86400, tags: [`product-${id}-analytics`] },
    }).then(res => res.json()),
  ]);
  
  return (
    <div>
      <ProductDetails product={product} />
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews reviews={reviews} />
      </Suspense>
      <RelatedProducts products={related} />
      <ProductAnalytics analytics={analytics} />
    </div>
  );
}

// app/api/revalidate/route.ts - On-demand revalidation
export async function POST(request: Request) {
  const { tag, path, secret } = await request.json();
  
  // Verify secret
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  // Revalidate by tag
  if (tag) {
    revalidateTag(tag);
  }
  
  // Revalidate by path
  if (path) {
    revalidatePath(path);
  }
  
  return Response.json({ revalidated: true, tag, path });
}

// Server Action with revalidation
export async function updateProduct(productId: string, data: ProductData) {
  await db.product.update({
    where: { id: productId },
    data,
  });
  
  // Revalidate specific paths and tags
  revalidatePath(`/products/${productId}`);
  revalidatePath('/products');
  revalidateTag(`product-${productId}`);
  revalidateTag('products');
}

// app/products/[id]/error.tsx - Error Boundary (Client Component)
'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="error-boundary">
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      {error.digest && <p>Error ID: {error.digest}</p>}
      <button onClick={reset}>Try again</button>
    </div>
  );
}

// app/products/[id]/loading.tsx - Loading State
export default function Loading() {
  return (
    <div className="loading">
      <ProductSkeleton />
    </div>
  );
}

// app/products/[id]/not-found.tsx - Not Found
export default function NotFound() {
  return (
    <div className="not-found">
      <h2>Product not found</h2>
      <Link href="/products">Back to products</Link>
    </div>
  );
}

// app/products/[id]/page.tsx - Server Component with error handling
import { notFound } from 'next/navigation';

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  
  try {
    const product = await db.product.findUnique({ where: { id } });
    
    if (!product) {
      notFound(); // Triggers not-found.tsx
    }
    
    return (
      <div>
        <ProductDetails product={product} />
        <Suspense fallback={<ReviewsSkeleton />}>
          <ProductReviews productId={id} />
        </Suspense>
      </div>
    );
  } catch (error) {
    // Error will be caught by error.tsx
    throw error;
  }
}

// Async Server Component with error handling
async function ProductReviews({ productId }: { productId: string }) {
  try {
    const reviews = await db.review.findMany({
      where: { productId },
      orderBy: { createdAt: 'desc' },
    });
    
    if (reviews.length === 0) {
      return <p>No reviews yet.</p>;
    }
    
    return (
      <div>
        {reviews.map(review => (
          <ReviewCard key={review.id} review={review} />
        ))}
      </div>
    );
  } catch (error) {
    // Error will bubble up to nearest error.tsx
    throw new Error('Failed to load reviews');
  }
}

// app/products/[id]/page.tsx - Server Component with metadata
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  
  // Fetch product data for metadata
  const product = await db.product.findUnique({ where: { id } });
  
  if (!product) {
    return {
      title: 'Product Not Found',
    };
  }
  
  return {
    title: product.name,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      images: [product.imageUrl],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: product.name,
      description: product.description,
      images: [product.imageUrl],
    },
  };
}

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });
  
  if (!product) {
    notFound();
  }
  
  return <ProductDetails product={product} />;
}

// app/layout.tsx - Root layout with static metadata
export const metadata: Metadata = {
  title: {
    default: 'My App',
    template: '%s | My App',
  },
  description: 'My awesome app',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://example.com',
    siteName: 'My App',
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@myapp',
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}