Two Forms of Pre-rendering

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

• Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
• Server-side Rendering is the pre-rendering method that generates the HTML on each request.

Here is an example of Static Generation with the App Router:

// Static Generation: HTML is generated at build time
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function Post({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

And here is how Server-side Rendering looks:

// Server-side Rendering: HTML is generated on each request
export const dynamic = 'force-dynamic';

export default async function Dashboard() {
  const data = await fetchLiveData();
  return <div>{data.map(item => <Card key={item.id} {...item} />)}</div>;
}

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a “hybrid” Next.js app by using Static Generation for most pages and using Server-side Rendering for others.