Conditionally pull pre-rendered components into page in SSG .html site?

[lbell]

I may be straying off the reservation here, but I wonder if it's possible to generate X number of components during SSG (export to HTML) and have a page pull in a group of them as needed?

Simple use case: Pulling 5 random links to other blog posts from a pool of 5,000 pages.

The two options I can see are:

1. Pull those five and render at build time
2. Pull and render all 5,000 at build time, and hide all but 5 on the client.

Problem with 1) is that you get the same 5 on every refresh of the same page (reduces link "discover-ability")
Problem with 2) is that's a lot of extra cruft to be passing with every page just to hide / remove all but five at display time.

I'm up for any exploration on how to do this, even if that means admitting I'm going about it all wrong. ;-)

[Vadorequest]

SSG is for generating pages, not components. So, you can pre-generate pages.

And what you want may be what's called fallback option.

See https://nrn-v2-mst-aptd-gcms-lcz-sty-c1.now.sh demo about how fallback works

See https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required for official doc

[lbell]

Currently I'm using a pseudo-optimized version of 2:

function LinkList({links}){ // links is 100 random links
  const [fiveLinks] = useState(getFiveRandom(links)); // Randomly pull five
  fiveLinks.forEach((link) => {
    // create array of link Components from the 5 shuffled out above
  }

  return(
    <div>
        {fiveLinksArray}
    </div>
  )
}

This does regenerate a new five on every page load, and by pulling an initial random 100 of the 5000, it lightens the load, but looks random enough.

The only negative is on page refresh, I get a flash of the initial 5 links before they switch to the newly selected 5 links.

And again, this is for exported SSG html files.