Server-Side Rendering (SSR)

This page demonstrates server-side rendering in Next.js. Notice there's no 'use client' directive, as Next.js pages are server components by default.

API Response

This data was fetched server-side using POST to prevent caching:

{
  "message": "Data from server route",
  "timestamp": "2025-12-13T08:19:11.746Z",
  "delay": "1 second",
  "type": "server-side"
}

Key Characteristics

  • HTML is generated on the server for each request
  • Better initial page load performance
  • Improved SEO as content is ready for crawlers
  • Works without JavaScript enabled
  • Reduced client-side processing

When to Use SSR

Server-side rendering is ideal for:

  • Public pages that need SEO optimization
  • Content that changes on every request
  • Pages with dynamic data that need fast initial load
  • Blog posts and marketing pages

Implementation in Next.js

Server components are the default in Next.js 13+. They automatically:

  • Reduce the client-side JavaScript bundle
  • Enable streaming and partial rendering
  • Allow direct access to backend resources
  • Keep sensitive data and logic on the server