Static Site Generation (SSG) vs Server-Side Rendering (SSR) in Next.js

Understanding when to use SSG vs SSR is crucial for optimal performance. Let’s break down both approaches.

Static Site Generation (SSG)

// Pre-rendered at build time
export default function Blog({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  )
}

export async function getStaticProps() {
  const posts = await fetchPosts()
  return { props: { posts } }
}

When to Use Each

• SSG: Blogs, marketing pages, documentation
• SSR: User dashboards, real-time data