Server Components vs Client Components in Next.js

// Server Component (default in Next.js 13, 14, and 15)
// app/products/page.js
export default async function ProductsPage() {
  // This data fetching happens on the server
  const products = await fetch('https://api.example.com/products').then(res =>
    res.json()
  );

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// Client Component (Next.js 13, 14, and 15)
// app/counter.js
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Next.js 15 Server Component with Async Request APIs
// app/dashboard/page.js
import { cookies, headers } from 'next/headers';

export default async function Dashboard({ searchParams }) {
  // In Next.js 15, these are now async APIs
  const cookieStore = await cookies();
  const headersList = await headers();

  // These fetch calls run in parallel automatically
  const userData = fetch('https://api.example.com/user').then(res =>
    res.json()
  );
  const revenueData = fetch('https://api.example.com/revenue').then(res =>
    res.json()
  );

  // Wait for both to resolve
  const [user, revenue] = await Promise.all([userData, revenueData]);

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <RevenueChart data={revenue} />
    </div>
  );
}

// Client Component Data Fetching (consistent across versions)
// app/profile/client-profile.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      try {
        const response = await fetch('https://api.example.com/user');
        if (!response.ok) {
          throw new Error('Failed to fetch user data');
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
        console.error('Error fetching user:', err);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>No user data found</div>;

  return (
    <div>
      <h1>Profile: {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// Server Component (cannot use hooks or event handlers)
export default function ServerButton() {
  // This would cause an error in Next.js 13, 14, and 15:
  // const [clicked, setClicked] = useState(false);

  // This would also cause an error:
  // return <button onClick={() => alert('Clicked')}>Click me</button>;

  // Instead, we need to use a Client Component for interactivity
  return <ClientButton />;
}

// Client Component for interactivity (Next.js 15 with React Compiler benefits)
'use client';

import { useState } from 'react';

export default function ClientButton() {
  const [clicked, setClicked] = useState(false);

  // In Next.js 15 with React Compiler (experimental),
  // this function would be automatically optimized without needing useCallback
  const handleClick = () => setClicked(!clicked);

  return (
    <button
      onClick={handleClick}
      className={clicked ? 'bg-green-500' : 'bg-blue-500'}
      aria-pressed={clicked}
    >
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

// app/products/[id]/page.js - Server Component
import { ProductDetails } from './product-details';
import { AddToCartButton } from './add-to-cart-button';
import { notFound } from 'next/navigation';

export default async function ProductPage({ params }) {
  // Fetch data on the server
  try {
    const response = await fetch(
      https://api.example.com/products/${params.id}
    );

    // Handle 404 errors gracefully
    if (!response.ok) {
      if (response.status === 404) {
        notFound();
      }
      throw new Error(Failed to fetch product: ${response.statusText});
    }

    const product = await response.json();

    return (
      <div className="product-page">
        {/<em> Server Component with product data </em>/}
        <ProductDetails product={product} />

        {/<em> Client Component for interactivity </em>/}
        <AddToCartButton productId={product.id} />
      </div>
    );
  } catch (error) {
    console.error('Error loading product:', error);
    throw error; // Let the error boundary handle it
  }
}

// app/products/[id]/product-details.js - Server Component
export function ProductDetails({ product }) {
  if (!product) return null;

  return (
    <div>
      <h1>{product.name}</h1>
      <p className="description">{product.description}</p>
      <div className="price">${product.price.toFixed(2)}</div>
    </div>
  );
}

// app/products/[id]/add-to-cart-button.js - Client Component
'use client';

import { useState } from 'react';

export function AddToCartButton({ productId }) {
  const [isAdding, setIsAdding] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);

  async function handleAddToCart() {
    setIsAdding(true);
    setError(null);
    setSuccess(false);

    try {
      const response = await fetch('/api/cart', {
        method: 'POST',
        body: JSON.stringify({ productId }),
        headers: { 'Content-Type': 'application/json' },
      });

      if (!response.ok) {
        throw new Error('Failed to add item to cart');
      }

      setSuccess(true);
    } catch (err) {
      setError(err.message);
      console.error('Error adding to cart:', err);
    } finally {
      setIsAdding(false);
    }
  }

  return (
    <div>
      <button
        onClick={handleAddToCart}
        disabled={isAdding}
        className={add-to-cart-button ${success ? 'success' : ''} ${error ? 'error' : ''}}
        aria-busy={isAdding}
      >
        {isAdding ? 'Adding...' : success ? 'Added to Cart' : 'Add to Cart'}
      </button>

      {error && <p className="error-message">{error}</p>}
    </div>
  );
}