Helle people, I am try to find the way to correctly fetch data in server component and then client component from the client component. Actually I am doing that.

Some code:
In the server component:

export default async function ServerComponentParent() {
  await getDataOnServer('/data/data1.bin');
  await getDataOnServer('/data/data2.bin');

  return (
    <AnotherClientComponent />
  );
}

Then in the client component I fetch again to use the cache system.

export default function TheClientComponent {
  const data1 = useData('/data/data1.bin');
  const data2 = useData('/data/data2.bin');
  
  return (...);
}

useData() is a hook to fetch data

export function useData(url: string) {
  const [data, setData] = useState<ArrayBuffer | null>();

  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const result = await getData(url);
      if (!ignore) {
        setData(result);
      }
    }

    fetchData();

    return () => {
      ignore = true;
    }
  }, []);

  return data;
}

getData() is the fetch function

export const getData = async (url: string) => {
  try {
    const data = await fetch(url, { next: { revalidate: false } });
    const arrayBuffer = await data.arrayBuffer();
    return arrayBuffer;
  } catch (error) {
    console.error('Error fetching static data:', error);
    throw error;
  }
};

Some details:
1. Data are static and immutable, so I do not need to revalidate them.
2. I do not want to include data in the initial bundle, that's why I am fetching them.
3. I do not need data in the server component and nowhere else but just in the client component (only one).
4. Actually the client component that consume data it is not a direct children of the server component, so I want to avoid props drilling.
5. The server component where I fetching data is the closer to the client component.
6. I am using nextjs 14.2.7 with app routing.

Continue..