SSR vs SSG in Next.js: When and Why to Use Each?

Next.js is a powerful React framework that enables developers to build fast, SEO-friendly web applications. One of the key features that sets it apart is its flexible data fetching strategies — namely SSR (Server-Side Rendering) and SSG (Static Site Generation). In this post, we’ll break down what these terms mean, when to use each, and show practical examples to help you choose the right approach for your project.

🧠 What is Server-Side Rendering (SSR)?

With SSR, the HTML for a page is generated on the server at every request. This means that the data is always up to date.

✅ Pros:

• Real-time data
• SEO-friendly
• Works well with personalized or dynamic content

❌ Cons:

• Slower response time than static pages
• Higher load on the server

🔧 How to Use SSR in Next.js

You use the getServerSideProps function inside your page component.

// pages/products.tsx
import React from 'react';
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return { props: { products } };
}
export default function ProductsPage({ products }: { products: any[] }) {
  return (
    <div>
      <h1>Live Product List</h1>
      <ul>
        {products.map(p => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

🧊 What is Static Site Generation (SSG)?

With SSG, the HTML is generated at build time — meaning the content is static until you rebuild the site.

✅ Pros:

• Super fast page loads
• No server dependency
• Ideal for blogs, documentation, marketing pages

❌ Cons:

• Content becomes stale unless rebuilt
• Not ideal for real-time data

🔧 How to Use SSG in Next.js

You use the getStaticProps function — it only runs at build time.

// pages/blog.tsx
import React from 'react';
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}
export default function BlogPage({ posts }: { posts: any[] }) {
  return (
    <div>
      <h1>Static Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

🔄 Bonus: ISR (Incremental Static Regeneration)

Next.js also allows incremental static regeneration, where static pages can be updated after deployment.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 60, // Regenerate every 60 seconds
  };
}

🧪 Use Cases Comparison

💡 Final Thoughts

Choosing between SSR and SSG depends on the nature of your data and how frequently it changes. When in doubt, here’s a simple rule of thumb:

Use SSG when content is mostly static. Use SSR when content must always be up-to-date. And don’t forget: with ISR, you can get the best of both worlds.