Server Components (default) in Next.js

// Server Component (default) - No 'use client'
// app/products/page.tsx

interface Product {
  id: string
  name: string
  price: number
}

// Can be async and fetch data directly
export default async function ProductsPage() {
  // Direct database access or API calls
  const products = await fetch('https://api.example.com/products', {
    cache: 'force-cache' // Cache strategy
  }).then(res => res.json())

  // Can access environment variables directly
  const secretKey = process.env.SECRET_API_KEY

  // Can import server-only modules
  const db = await import('@/lib/db')
  const users = await db.getUsers()

  return (
    <div>
      <h1>Products</h1>
      {products.map((product: Product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  )
}

// Server Component with children
export async function ServerWrapper({ children }: { children: React.ReactNode }) {
  const data = await fetchData()
  
  return (
    <div>
      <h1>{data.title}</h1>
      {children} {/* Can be Client Components */}
    </div>
  )
}