Correct way to fetch trpc data on SSR and CSR

"use server"

export default async function Applications({ params }: Props) {
  const { guildId } = await params;
  const applications = await api.application.getAll({ guildId });

  return (
    <HydrateClient>
      <h1>Applications {guildId}</h1>
      <Test applications={applications} />
    </HydrateClient>
  );
}

"use client"

export const Test = ({ applications, guildId }: TestProps) => {
  const { data, refetch } = api.application.getAll.useQuery(
    {
      guildId: guildId,
    }
  );
  const [apps, setApps] = useState(applications);

  useEffect(() => {
    if (data) {
      setApps(data);
    }
  }, [data, applications]);

  return (
    <div>
      <h1>Test</h1>
      {apps.map((application) => (
        <div key={application.id}>{application.name}</div>
      ))}
      <Button
        onClick={async () => {
          await refetch();
        }}
      >
        refetch
      </Button>
    </div>
  );
};