lively-kitchen-45586
07/09/2020, 4:31 AMif (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/1281057252225323010polite-vr-99522
07/09/2020, 4:56 AMable-glass-75333
07/09/2020, 8:50 AM