#Use client component with media query or RSC with Tailwind classes?

8 messages · Page 1 of 1 (latest)

undone forum
#

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?

outer quiverBOT
#

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

undone forum
#

bump

placid canopy
#

What do you mean by better? Performance wise, RSC will always perform better. You always want to use RSC for non-interactive component, you can even combine both server-component and client-component.

undone forum
placid canopy
outer quiverBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer
undone forum
#

Thanks for replying!