Server-Side Rendering (SSR)

Rendered via Server runtime

Location: New York City, NY

Temperature: 3°C

Wind Speed: 7.4 km/h

Rendered at: 2025-11-19T12:24:19.598Z

Server-Side Rendering (SSR)

Pages are rendered on-demand for each request on the server. This ensures fresh data on every page load but requires server computation time.

✓ Pros

  • •Always fresh data on every request
  • •Dynamic content per user/request
  • •Good for personalized content
  • •SEO-friendly with dynamic data

⚠ Cons

  • •Slower than static - requires server processing
  • •Higher server load and costs
  • •Depends on server response time
  • •Can't be cached on CDN effectively

Performance Metrics

Server Duration

483.06ms

TTFB

measuring...

DOM Ready

measuring...

Full Load

measuring...

Server Duration: Time to render on server (SSG at build, SSR/ISR/Edge per request)

TTFB: Time to First Byte from browser perspective (network + server time)

DOM/Full Load: Browser-side parsing and resource loading times

Implementation Code

File:app/ssr/page.tsx
export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function Page() {
  await headers(); // Forces dynamic rendering
  const data = await fetchData();
  return <DataCard data={data} />;
}

Key Configuration:

  • →dynamic = 'force-dynamic' prevents static optimization
  • →revalidate = 0 ensures no caching between requests
  • →Calling headers() guarantees fresh server-side render every time
← Back to Home