What is static site generation and how is it different from server side rendering?

Static site generation builds the HTML for every page in advance, at build time, before any visitor even requests the page, then simply serves those already built files instantly. Server side rendering instead builds the HTML fresh on every single request. Static generation is extremely fast since nothing needs to be built on demand, but it works best for content that does not change on every single visit.

// Next.js static generation example
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}