Hi there! So, I've something like the following code: ```ts
export default async function Page() {
const data = await getData()
return
<section>
<div className="hidden sm:block"><DataTable data={data} /></div>
<div className="sm:hidden"><DataList data={data} /></div>
</section>
}
But I'm wondering if the following isn't better: ```ts
'use client'
export default function ClientComponent({ data }) {
const isDesktop = useMediaQuery('(min-width: 768px)')
return isDesktop ? <DataTable data={data} /> : <DataList data={data} />
}
Is the client version better since it only passes data for one component? The RSC version passes data to 2 components, although one of them is hidden, correct?