Benchmark: Server vs Client Components for 10k Product Page Load Time

Modern web frameworks like Next.js 13+ and React Server Components have sparked debate over when to use server-rendered vs client-rendered components for large-scale ecommerce pages. This benchmark tests both approaches for a product listing page with 10,000 SKUs to measure real-world load time impacts.

Test Setup

We used a controlled environment with:

• Framework: Next.js 14 with App Router
• Hosting: Vercel Edge Network (same region for all tests)
• Dataset: 10,000 product records with title, price, image URL, and short description
• Metrics Tracked: TTFB (Time to First Byte), FCP (First Contentful Paint), LCP (Largest Contentful Paint), TBT (Total Blocking Time), and CLS (Cumulative Layout Shift)
• Test Devices: Simulated 4G Slow (400ms latency, 1.5Mbps down) and Desktop Fast (no throttling)
• Sample Size: 100 runs per test variant, averaged results

Test Variants

We tested three component split configurations:

1. Full Server Components (FSC): All product cards, layout, and navigation rendered as React Server Components (RSC), with zero client-side JavaScript for rendering.
2. Hybrid Split (HS): Static layout and product data fetched via RSC, with interactive elements (add-to-cart buttons, image zoom) as Client Components.
3. Full Client Components (FCC): All components rendered client-side, with initial page shell server-rendered, data fetched via client-side useEffect.

Results: 10k Product Page Load Times

Desktop Fast (No Throttling)

Metric

Full Server (FSC)

Hybrid (HS)

Full Client (FCC)

TTFB

120ms

145ms

95ms

FCP

180ms

210ms

320ms

LCP

240ms

290ms

480ms

TBT

0ms

45ms

210ms

CLS

0.01

0.02

0.08

4G Slow Throttling

Metric

Full Server (FSC)

Hybrid (HS)

Full Client (FCC)

TTFB

380ms

420ms

310ms

FCP

520ms

610ms

1120ms

LCP

690ms

810ms

1840ms

TBT

0ms

120ms

890ms

CLS

0.01

0.03

0.21

Key Findings

• Full Server Components delivered 50% faster LCP than Full Client on slow networks, with zero JavaScript execution blocking render.
• Hybrid splits added minimal overhead (15-20% slower than FSC) while enabling critical interactivity for ecommerce features.
• Full Client Components suffered from long TBT on 10k product lists, as client-side rendering required parsing 1.2MB of product JSON in the main thread.
• CLS was near-zero for server-rendered variants, as all layout is calculated before sending to the client, avoiding reflows from late-loaded data.

When to Use Each Approach

Full Server Components: Best for static or infrequently updated 10k+ product pages with no interactive elements required on initial load. Ideal for SEO-first pages where crawlability is priority.

Hybrid Split: Recommended for most ecommerce product listing pages. Use RSC for data fetching and layout, Client Components only for interactive elements that need browser APIs (e.g., cart, filters, image zoom).

Full Client Components: Only viable for small product sets or pages where real-time data updates are required post-load, and initial load time is not a priority.

Conclusion

For 10k product pages, server components (or hybrid splits) deliver significantly faster load times, better Core Web Vitals, and improved user experience over full client-side rendering. Avoid full client components for large product lists to prevent main thread blocking and poor performance on slow networks.