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.
<ul>
<li>Static Generation is the pre-rendering method that generates the HTML at
build time. The pre-rendered HTML is then reused on each request.</li>
<li>Server-side Rendering is the pre-rendering method that generates the HTML
on each request.</li>
</ul>
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.

Two Forms of Pre-rendering

We recommend using Static Generation (with and without data) whenever
possible because your page can be built once and served by CDN, which makes it
much faster than having a server render the page on every request.
You can use Static Generation for many types of pages, including:
<ul>
<li>Marketing pages</li>
<li>Blog posts</li>
<li>E-commerce product listings</li>
<li>Help and documentation</li>
</ul>
You should ask yourself: "Can I pre-render this page ahead of a user's
request?" If the answer is yes, then you should choose Static Generation.
On the other hand, Static Generation is not a good idea if you cannot
pre-render a page ahead of a user's request. Maybe your page shows frequently
updated data, and the page content changes on every request.
In that case, you can use Server-Side Rendering. It will be slower, but the
pre-rendered page will always be up-to-date. Or you can skip pre-rendering and
use client-side JavaScript to populate data.

Chaim Halbert

Blog posts:

Two Forms of Pre-rendering

When to Use Static Generation vs. Server-side Rendering