I have built a website using a feature similar to Incremental Static Regeneration (ISR) in Next.js. However, I've encountered a challenge when it comes to displaying real-time data, such as the number of likes, alongside the statically generated content.

Since ISR generates static pages at build time, it doesn't fetch the latest data for dynamic elements like likes. To work around this, I considered fetching the latest data on the client-side every time a user visits the page. However, this approach introduces a noticeable lag between the display of the static content and the updated like count, resulting in a suboptimal user experience.

I'm curious to know how others have tackled this problem while still leveraging the benefits of ISR. How do you display real-time data, such as likes, alongside statically generated content without compromising the user experience? Are there any best practices or recommended approaches for handling this scenario?

Alternatively, should I consider moving away from ISR altogether for pages that require real-time data updates? If so, what would be a suitable alternative that balances performance and data freshness?

I would greatly appreciate any insights, experiences, or suggestions from the community on how to effectively combine ISR with real-time data display. Thank you in advance for your help!