Server-Side Rendering (Next.js Basics) – SSR & SSG

When building modern React applications, performance and SEO are critical. However, traditional React apps (created with CRA or Vite) are client-side rendered, meaning the browser loads a blank page first and then runs JavaScript to render the UI.

This can hurt SEO, page load speed, and user experience — especially on slower networks.

That’s where Next.js comes in. It adds powerful features like Server-Side Rendering (SSR) and Static Site Generation (SSG) to React — helping you build fast, SEO-friendly, and production-ready apps.

What is Server-Side Rendering (SSR)?

Server-Side Rendering (SSR) means that the HTML for a page is generated on the server for every request — instead of being generated on the client (browser).

When a user visits your website:

The server runs the React code for that page.
It generates the fully rendered HTML.
That HTML is sent to the browser, which displays content immediately.
Then, React “hydrates” the page — attaching event listeners and making it interactive.

SSR Example in Next.js

Let’s create a simple Next.js page that fetches data using SSR:

// pages/users.js
import React from "react";

function Users({ users }) {
  return (
    <div>
      <h1>Server-Side Rendered Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// SSR function — runs on the server for every request
export async function getServerSideProps() {
  const res = await fetch("<https://jsonplaceholder.typicode.com/users>");
  const users = await res.json();

  return { props: { users } };
}

export default Users;

Here,

getServerSideProps() runs on the server before the page is rendered.
It fetches data from an API.
The data is passed as props to the component.
The HTML page is fully rendered and sent to the browser.

What is Static Site Generation (SSG)?

Static Site Generation (SSG) means that HTML pages are pre-rendered at build time — not on every request.

When you build your Next.js app (npm run build):

Next.js fetches data once
Generates static HTML files for each page
Serves them instantly from a CDN or cache

SSG Example in Next.js

// pages/blog.js
import React from "react";

function Blog({ posts }) {
  return (
    <div>
      <h1>Static Site Generated Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

// SSG function — runs only once during build time
export async function getStaticProps() {
  const res = await fetch("<https://jsonplaceholder.typicode.com/posts?_limit=5>");
  const posts = await res.json();

  return { props: { posts } };
}

export default Blog;

Here,

getStaticProps() runs at build time, not per request.
The data is fetched once and cached in static HTML.
Perfect for content that doesn’t change often (blogs, docs, portfolios).

SSR vs SSG – Key Differences

Feature	SSR (Server-Side Rendering)	SSG (Static Site Generation)
When HTML is Generated	On every request	At build time
Performance	Slower (runs for each request)	Super fast (pre-built)
Data Freshness	Always up-to-date	May become stale
SEO Friendly	Yes	Yes
Use Case	Dynamic content (user dashboards, live data)	Static content (blogs, product pages)

Combining SSR and SSG – The Next.js Advantage

Next.js allows you to mix SSR and SSG in the same app.

For example:

Use SSG for your homepage or blog posts.
Use SSR for dashboards or personalized content.

This flexibility gives you the best of both worlds — performance and freshness.

Incremental Static Regeneration (ISR)

Next.js also offers Incremental Static Regeneration (ISR) — a hybrid approach between SSR and SSG.

It allows you to:

Pre-render pages statically
Regenerate them in the background at regular intervals

Example:

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

  return {
    props: { data },
    revalidate: 60, // Rebuild the page every 60 seconds
  };
}

Benefits of SSR & SSG in Next.js

1. Server-Side Rendering (SSR)

SSR (Server-Side Rendering) means pages are rendered on the server for each request and sent as ready-to-view HTML to the browser.

Benefits:

Better SEO: Search engines can easily index pre-rendered HTML pages.
Faster initial load: The user sees content sooner (no waiting for JavaScript to render).
Dynamic data: Always serves the latest data from the server.
Improved user experience: Less loading time for users on slower devices.

2. Static Site Generation (SSG)

SSG (Static Site Generation) means pages are pre-rendered at build time and served as static files.

Benefits:

Super fast performance: Static pages load instantly from CDN or cache.
Better scalability: No server rendering needed per request.
Cost-efficient: Reduces server workload and hosting costs.
SEO-friendly: Pre-rendered pages are easily crawled by search engines.