In a NextJS16+ app using app router, assume the following server component:

const getData() = async () => {
  "use cache";
  cacheTag("data");
  return databaseCall();
};

const MyServerComponent = async () => {
  // Server function
  const myData = getData();

  return (
    <>
      {myData.map((item) => (
        // key as updatedAt to ensure remounting
        
      ))}
    
  );
};

and the following client component:

"use client";
const MyClientComponent = async (item) => {
  return (
    
{item.value}
  );
};

MyServerComponent is statically rendered because it uses static data. When the underlying data changes and cache is revalidated with updateTag("data"), I can see that the updated values are correctly fetched and stored in the static cache. However, MyClientComponent, which receives props from this server component, ends up using stale props.

Depending on how the component tree is structured, the client component either lags behind the server updates or never receives the updated props at all unless I refresh the page.

Is passing cached props to client components an anti-pattern that is not supported by NextJS? I see many workarounds using SWR, forced refreshes or useEffect but I do not understand why this would be required in this case.