I learned fetch data can be async when I code a page. Also I realize this called SSR mechanism do.
Then I coded a page, I have some concern about server action and how we refactor code.
When I coded some page, I used lots of use client component and it included many functions about react.

'use client';
// Assume that useQuery hook is react-query from tanstack
export default function Home() {
  const data = useQuery(...);
  const [example, setExample] = useState(); // react hook

  return (
    <div>
      {data.map((d, k) => (...)}
      {example && <div> ... </div>}
    </div>
  )
}

This code show a common code when I code a page.
I think this code is not a SSR so I refactor this code.

async function getData() {
  const res = useQuery();

  return res;
}
export default async function Home() {
  const data = await getData();

  return (
  <div>
    {data.map((d, k) => (...)}
    <Example data={data} />
  </div>
  )
}

Refactored code doesn't have a state hook. Because react-hook can only use a client component
Is this the right way refactoring code?