How do I statically render the first few pages at build time and the rest in real time in Nextjs?

Question

There's a requirement wherein I'm supposed to render a few paginated pages. The problem is, I need to render the first 3 pages during build time and the remaining in real time, i.e if a user clicks on page 4, it should then fetch the data for page 4, but for the first 3, the data needs to be fetched prior, i.e during build time itself.

How do I achieve this in nextjs?

Answer 1

You can accomplish this with https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

You would need the path of the first 3 pages, and pass those with getStaticPaths and leave the rest out.

This will generate the first 3 pages on build, and dynamically build the rest when the user visits the page.