Fetching in Server Components in Next.js

// Simple fetch in Server Component
async function ProductsPage() {
  const res = await fetch('https://api.example.com/products')
  const products = await res.json()
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  )
}

// Parallel fetching
async function DashboardPage() {
  // Fetch in parallel for better performance
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(res => res.json()),
    fetch('/api/posts').then(res => res.json()),
    fetch('/api/comments').then(res => res.json()),
  ])
  
  return (
    <div>
      <UsersList users={users} />
      <PostsList posts={posts} />
      <CommentsList comments={comments} />
    </div>
  )
}

// Sequential when data depends on each other
async function UserPostsPage({ userId }: { userId: string }) {
  // First fetch user
  const user = await fetch(`/api/users/${userId}`).then(res => res.json())
  
  // Then fetch their posts
  const posts = await fetch(`/api/users/${userId}/posts`).then(res => res.json())
  
  return (
    <div>
      <h1>{user.name}'s Posts</h1>
      <PostsList posts={posts} />
    </div>
  )
}