Next.js Discord

Discord Forum

Conditional rendering based on data from endpoint in client component

Answered
robf120 posted this in #help-forum
Open in Discord
I had components that don’t render if the logged in user doesn’t have a feature on their account but I don’t want to write a book to fetch this check from the backend, what’s the preferred pattern for this in app router
Answered by B33fb0n3
yea, for me it's the best way to fetch data clientside
View full answer

6 Replies

@robf120 I had components that don’t render if the logged in user doesn’t have a feature on their account but I don’t want to write a book to fetch this check from the backend, what’s the preferred pattern for this in app router
For fetching data clientside I recommend you using [swr](https://swr.vercel.app/) or [react query](https://tanstack.com/query/v3)

But keep in mind, that you should check auth serverside to avoid page leaks and flashing screens.
This a bit different because it’s basically user bought this feature load this child component but writing a hook feels like the wrong approach for this
@robf120 This a bit different because it’s basically user bought this feature load this child component but writing a hook feels like the wrong approach for this
oh ok. If you using ssr, you can fetch serverside and conditionaly render there. If that's impossible for you and you really need clientside fetching, use swr or react query (I prefer react query)
Yeah I was leaning toward a react query so I only gotta fetch this data once
yea, for me it's the best way to fetch data clientside
Answer