So I currently fetch in a server component and then pass that data down as props to my client component. I decided to fetch in a server component so that I can cache it, because the data doesn't change often. But I hate having to prop drill to pass the data down to the client component that uses it. I'm thinking that if I fetch data in a server action, I can still cache the data and not have to prop drill. Server actions is not suppose to be used for data fetching but I don't see why this wouldn't work. Please let me know if this makes sense or if you have a better solution.

//actions.ts
'use server'
export async function myAction() {
  const res = await fetch('/foo', { next: { revalidate: 3600 } })
  const data = await res.json()
  return data
}

//client-component.tsx
'use client'
export default function ClientComponent() {
  const {data} = useAction(myAction) //custom hook
}