SSG Pagination Strategy usage example

- How to implement pagination using SSG/ISR?
- How to reduce next.js build time for Listing Pages with pagination?

The following example illustrates how pagination strategies can be used to handle large amounts of pages, such as store categories (PLP - Product Listing Pages).

Example situation:

- 1000 categories (PLPs)
- each category has 1000 products
- there are 10 results per page
- therefore each category will have 100 pages

Problem:

Long build due to SEO requirement all pages are SSG (`getStaticPaths`)

Solution:

- On the build phase, only build the first few paginated pages and rest on the fly.
- This example shows how to create SSG Pagination for the first 5 pages, and use ISR for the rest.
- For SEO reasons page 1 is redirected to index page to avoid duplicate content

// pages/category/[page].tsx

export const getStaticPaths: GetStaticPaths = async () => {
  const prerenderPages = 5 // <--- number of pages to prerender

  ...

  return {
    ...
    fallback: 'blocking', // <--- this will build on the fly
  }
}
build time for pagination strategy