I understand that we can't opt-out of router cache and there are ways to invalidate it. However, I think this scenario is a bit different.

I have a use case where there is a top level server component and one of its children is another server component, the child server component's content are random (so, for each request we want to have different content).

<ParentServerComponet {...bunchOfProps}>
  {/** there are other components here too. */}
  <Suspense>
    <ChildServerComponent someProp={value} />
  </Suspense>
  {/** there are other components here too. */}
</ParentServerComponet>

On the server cache side of things, I've set cache: no-store to make sure the request data isn't cached. However, when we move back and forth on the client side it uses client cache hence for route /pdp/abc-xyz-123 it always renders the same page as expected. But what I'm looking for is to invalidate ChildServerComponent specifically (or rather, I want to re-run that server component on every route change, the other part of the page can stay cached).

I hope this makes sense. I think export const dynamic = 'force-dynamic'; won't solve it as my issue is with client cache.
I think one alternative can be to make ChildServerComponent a client component? (I'm going to try this but not sure if it'll work out, I'll still post this as I'd still like to know if there is a way to make that one server component re-render/re-fetch on route change).

I maybe wrong in some aspects as I haven't spent a lot of time working with latest next.

Thank you for taking a look 🙏