Best way to render "statically-known" dynamic data in Next?
In the pursuit of creating the fastest possible page load experience, I keep running into this dilema on how to optimize this specific case and I'm curious to see how y'all would approach it:
I have a page that renders a list of statically known items, which are known at build time. NextJS does a great job of realizing this and statically rendering the page, caching on the CDN when deployed to prod. However, I need the otherwise static list to be shuffled differently on every page reload. The list in question is above the page fold and immediately visible to the user when they open the page. I don't want the shuffling to slow down the page load or cause layout shifts and flashes, if possible. I believe my options are:
1. Force the page to be dynamic, render in NodeJS. The benefit here is that I am making minimal code changes and no client-side JS is being sent to shuffle/resolve timer after hydration - the HTML already has the items in the right order! However I don't want to spin up a Lambda and wait for its cold start just to shuffle an array and I think this certainly degrades load performance. I considered using
const revalidate = 0, but I am not sure if this is the best way to achieve this.
2. Dynamically render on the edge. I think this fixes the performance of serverless NodeJS, but I have the impression that using the edge runtime for rendering has been considered an anti-pattern lately
3. Statically render unshuffled list, shuffle it on the client. This causes the order to flash quickly after each reload on the client, but it enables me to cache the page on the CDN, lowering the TTFB.
4. Statically render loading state, replace with shuffled content on the client. This fixes the confusing "flash of unsorted list", but it possibly hides that content from search engines indexing this page and this content is important for SEO.
If you had to make a snappy UX, which trade-offs would you prefer to make and is there a better solution I am missing?0 Replies