^ I explained this a bit further in another group, and figured I'd also share here: Consider a site like Product Hunt, which has a public index page comprising of products. The products themselves don't change too frequently (if at all), but the upvotes per product, or the commentsCount can change very frequently. The skeleton approach is that you show a skeleton while you first load the products.

if (isLoading) { return <ProductSkeleton/ >}

In the approach I'm proposing, you load with a stale version of the product. Stale = pre-rendered product. Most product oriented details are probably still fresh, but things like upvote or comments count are gone stale. Once rendered, you do an SWR call to fetch the latest upvote numbers, and counter-up-animate the votes.

const { refreshedProduct, isLoadingRefreshedProduct } = functionUsingSWR()

...

if (isLoadingRefreshedProduct) { return <Product votes={product.votes} /> }

return <Product votes={refreshedProduct.votes} animateUpFrom={product.votes}>

This can be improved further — once Next.js lands the ability to revalidate-on-demand, then you don't need the SWR bits. Once there is an upvote, you trigger some webhook to revalidate the page, and by default you load the freshest results. So you effectively treat the results of your pre-rendered page as the skeleton https://twitter.com/sarupbanskota/status/1281057252225323010

Me Gusta! Always been a fan of eager-rendering as much data as possible, but this is at a whole other level 🙌

Is this a problem if the page is server side rendered and then hydrated?