Pagination or lazy-loading handles large review sets

A product page that fetches all reviews without a LIMIT clause will transfer every row in the reviews table on every page load. At 200 reviews averaging 500 bytes each, that's 100KB of JSON for a single product visit — multiplied across concurrent users, this becomes a cost and latency problem. ISO 25010 performance-efficiency requires that resource use be proportionate to demand. More concretely, a product that accumulates 10,000 reviews will eventually time out or OOM the serverless function handling the request, causing a user-visible 500 error at scale.

Add a REVIEWS_PER_PAGE limit to the review query and render pagination controls in components/ReviewsList.tsx.

// components/ReviewsList.tsx
const REVIEWS_PER_PAGE = 10

export function ReviewsList({ productId }: { productId: string }) {
  const [page, setPage] = useState(1)
  const { data: reviews, total } = useReviews(productId, page, REVIEWS_PER_PAGE)
  const totalPages = Math.ceil(total / REVIEWS_PER_PAGE)

  return (
    <section>
      {reviews.map(r => <ReviewItem key={r.id} review={r} />)}
      {totalPages > 1 && (
        <nav aria-label="Review pages">
          {Array.from({ length: totalPages }, (_, i) => (
            <button key={i} onClick={() => setPage(i + 1)} aria-current={page === i + 1 ? 'page' : undefined}>
              {i + 1}
            </button>
          ))}
        </nav>
      )}
    </section>
  )
}

The corresponding API route at api/reviews must accept ?page= and ?limit= and apply LIMIT / OFFSET in the database query — CSS-hiding overflow is not a substitute.