How should dynamic Gutenberg blocks work with page caching?

I have a custom dynamic Gutenberg block staff-group that retrieves data from staff posts in its render.php file via get_posts().

If one of the staff posts is updated, the block naturally reflects the latest content. However, this doesn’t work with my web host’s page caching. The page containing the block is cached, and it doesn’t know when the staff posts have been updated.

What is the recommended way to manage this?

I attempted to rework the block to take advantage of the render_callback pattern, but it did not seem to change anything. I guess I was hope a “dynamic” block would be truly dynamic and have some built-in magic to trigger a refresh.

The obvious solutions are:

  1. Update the frontend of the block on the client (via JS).
  2. Identify pages where the block has been used, and exclude them from the caching mechanism.

#2 could be done manually, by adding the paths to an exclude list, or dynamically, via a function that runs when the custom post type is saved. My host has a special path that can be accessed via wp_remote_get() to clear a specific page. But I’ll probably go with #1.

Am I missing something? Surely a lot of people are using blocks like Query Loop on multiple pages, or Synced Patterns, and not excluding those pages from their cache. Or do other hosts have better caching strategies?

Thanks for your help!