Next.js 14: A Deep Dive into Server Components

// app/page.tsx - A Server Component
async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();
  
  return (
    <div className="products-grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// components/Button.js
'use client'; // This directive marks this as a Client Component

import { useState } from 'react';

export function Button() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

// Parallel data fetching
async function Dashboard() {
  // These requests start simultaneously
  const productsPromise = getProducts();
  const usersPromise = getUsers();
  const ordersPromise = getOrders();
  
  // Wait for all data to be available
  const [products, users, orders] = await Promise.all([
    productsPromise,
    usersPromise,
    ordersPromise
  ]);
  
  return (
    // ...render with all the data
  );
}