SSR vs SSG With Next.js

⚔️ SSR vs SSG: What’s the Difference?

When building a modern web application with Next.js, understanding the difference between SSR (Server-Side Rendering) and SSG (Static Site Generation) is key to choosing the right rendering strategy for your pages.

Both approaches pre-render pages, but they differ in when and how the HTML is generated—and that has major implications for performance, SEO, and scalability.

🕰️ Server-Side Rendering (SSR)

In SSR, the HTML for each page is generated on each request at runtime. This means every time a user visits a page, the server runs a function and sends a fresh HTML response.

// pages/blog/[slug].js
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/post/${context.params.slug}`);
  const post = await res.json();

  return { props: { post } };
}
  

Use SSR when:

• Content changes frequently (e.g., dashboards, user-specific data)
• You need up-to-the-second accuracy
• You rely on request-time authentication or permissions

⚡ Static Site Generation (SSG)

With SSG, the HTML is generated at build time and served statically from a CDN. The page doesn't change unless the site is rebuilt.

// pages/blog/[slug].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    paths: posts.map(post => ({ params: { slug: post.slug } })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/post/${params.slug}`);
  const post = await res.json();

  return { props: { post } };
}
  

Use SSG when:

• Pages don’t change often (e.g., blog posts, documentation)
• You want ultra-fast performance
• SEO is critical and content doesn't need to be real-time

🧪 Real-World Analogy

Imagine you're at a coffee shop:

• SSR is like making coffee fresh on order—it's always accurate, but slower.
• SSG is like grabbing a pre-made bottle from the fridge—blazing fast, but may be slightly outdated.

🔁 ISR: The Best of Both Worlds

Next.js also supports Incremental Static Regeneration (ISR), which allows you to update static content without rebuilding the entire site.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/post/hello');
  const post = await res.json();

  return {
    props: { post },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}
  

This gives you the speed of SSG and the freshness of SSR—automatically in the background.

📊 Performance Comparison

📦 Deployment Note

Both SSR and SSG work with platforms like Vercel, Netlify, and Cloudflare Pages. Make sure to enable caching and headers properly to leverage performance.

💡 Best Practices

• Prefer SSG for pages that don’t need to update often
• Use SSR for dynamic, user-specific content
• Leverage ISR for a smart hybrid approach
• Monitor build time: Too many static paths can slow builds

✅ Final Thoughts

Choosing between SSR and SSG in Next.js isn’t about one being better—it's about choosing the right tool for the job. Use SSR when you need real-time content and SSG when you want lightning-fast, scalable pages. And for the best of both worlds? ISR is your friend. ⚡🌍