Server-Side Rendering (SSR)

Pages are rendered on the server for each request. Perfect for E-commerce, Profiles, and Real-time data applications where fresh, personalized content is essential.

Server

🌐
Request
Response
🖥️
Server receives request
Server fetches data
React.renderToString()
Server sends rendered HTML

Client

Client receives HTML
React.hydrate()
✨Page interactive
Benefits x Trade-offs

Benefits

  • •SEO Optimized: Search engines can crawl content
  • •Fast Initial Load: HTML ready immediately
  • •Social Sharing: Rich previews for social media
  • •Accessibility: Works without JavaScript

Trade-offs

  • •Higher server load: Server processes every request
  • •Increased latency: Server must render before sending
  • •More server resources: Requires more CPU/memory
  • •Slower for high traffic: Each request hits server
How to implement?

SSR uses async Server Components. In App Router, dynamic rendering is the default for pages with dynamic data.

export const dynamic = "force-dynamic";

export default async function ServerComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.message}</div>;
}
  • •Components are async functions (no 'use client' directive)
  • •Cannot use React hooks (useState, useEffect, etc.)
  • •Use async fetch() for data fetching on the server
  • •Data fetching happens on the server for each request