TypeScriptapp/products/page.tsx
Copy
1
// Server Component — runs on server, no JS sent to browser
2
import { FavoriteButton } from './FavoriteButton';
3
 
4
type Product = { id: string; name: string; price: number };
5
 
6
async function getProducts(): Promise<Product[]> {
7
  // Direct DB/API call — credentials never leak to client
8
  const res = await fetch('https://fakestoreapi.com/products?limit=8', {
9
    next: { revalidate: 60 }
10
  });
11
  return res.json();
12
}
13
 
14
export default async function ProductsPage() {
15
  const products = await getProducts();
16
 
17
  return (
18
    <div className="grid grid-cols-4 gap-4 p-8">
19
      {products.map(product => (
20
        <div key={product.id} className="border rounded p-4">
21
          <h2 className="font-bold">{product.name}</h2>
22
          <p className="text-lg">${product.price}</p>
23
          {/* Client Component — only interactive part */}
24
          <FavoriteButton productId={product.id} />
25
        </div>
26
      ))}
27
    </div>
28
  );
29
}