🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Querying only desktop sections directly in the groq query for a responsive header setup.

2 replies
Last updated: Jan 24, 2024
In my header setup, I have an array of sections for desktop and an array of sections for mobile(allows for a lot of customization). Is there a way I could only query the desktop sections when my screen is bigger than 767px directly in the groq query? I'm using Next.js app router and I'm not wanting to turn the entire header into a client component by checking the width that way.
Jan 24, 2024, 4:37 PM
that approach may make for a ton of queries in the event of a browser changing size.
Typically in the event of a header/footer or general site settings, it's best to query once from the server side and setup responsiveness using the front-end.
Jan 24, 2024, 5:55 PM
Oh wow, didn't even think of that haha. I'm sure that would have made my usage go up a bunch. Thank you!
Jan 24, 2024, 5:56 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?