1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Before: Client Component
'use client'
import { useEffect, useState } from 'react'
export default function ProductList() {
const [products, setProducts] = useState([])
useEffect(() => {
fetch('/api/products').then(res => res.json()).then(setProducts)
}, [])
return (
{products.map(product => )}
)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// After: Server Component
import { db } from '@/lib/database'
export default async function ProductList() {
const products = await db.products.findMany({
where: { published: true },
orderBy: { createdAt: 'desc' }
})
return (
{products.map(product => )}
)
}

1
2
3
4
5
6
7
8
9
10
11
12
import { Suspense } from 'react'
import { ProductListSkeleton } from '@/components/skeletons'
export default function ProductPage() {
return (
Our Products
}>
)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { unstable_cache } from 'next/cache'
import { db } from '@/lib/database'
const getCachedProducts = unstable_cache(
async (category: string) => {
return await db.products.findMany({
where: { category },
include: { images: true, reviews: true }
})
},
['products-by-category'],
{ revalidate: 3600, tags: ['products'] }
)
export default async function CategoryPage({ params }: { params: { category: string } }) {
const products = await getCachedProducts(params.category)
return 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Image from 'next/image'
import { generateBlurDataURL } from '@/lib/blur'
export function ProductImage({ src, alt }: { src: string, alt: string }) {
return (
src={src}
alt={alt}
width={400}
height={300}
placeholder="blur"
blurDataURL={generateBlurDataURL()}
className="object-cover rounded-lg"
priority // For above-the-fold images
/>
)
}