How would i do this
Unanswered
<ragewire/> posted this in #help-forum
So i have a nextjs site, and i have lots of server code before the page loads, and client componets. I idealy want to fetch user data on page load ie (username, email, balance, etc) and have that data shared with the server componets + client componets with the idealy least amount of api requests.
some ideas,
1. just having to fetch the data from db per call on the server side, then on the clinet side of a api request and then save to a content api
2. using cookies to store userdata per request, so each request and then each of the 30s or state update sync user data api request edit that data?
some ideas,
1. just having to fetch the data from db per call on the server side, then on the clinet side of a api request and then save to a content api
2. using cookies to store userdata per request, so each request and then each of the 30s or state update sync user data api request edit that data?
40 Replies
please do not suggest nextauth as when ever i try to get user data on the client i get this error
anyone going to help?
@<ragewire/> just to verify, you want to fetch the user data only on page load, and after the user leaves the page and then comes back it will fetch again?
So like it's gonna persist the data for the entirety of the time the user spends on the site
@<ragewire/> anyone going to help?
Also just a side note please remember this is a community forum and those community members often times have jobs and or a family. Comment seemed very inconsiderate to the 100s of people who do actively spend time helping out when they can
@Arinji <@922763629185601597> just to verify, you want to fetch the user data only on page load, and after the user leaves the page and then comes back it will fetch again?
yes, so my plan is on each page load, it calls getuserdata but then i dont want to have to recall getuserdata api route everywhere. only once per page load. im using page router btw.
@<ragewire/> yes, so my plan is on each page load, it calls getuserdata but then i dont want to have to recall getuserdata api route everywhere. only once per page load. im using page router btw.
Ah since page router I can't help you with code directly. But what I would do is fetch the data once and save it in cookies without an expiry
"If unspecified, the cookie becomes a session cookie. A session finishes when the client shuts down, after which the session cookie is removed"
From mdn^^
Then in other pages just get the data from the cookie
@Arinji i heard about something called a context provider api
would that be good for this case?
Yes you can use a context provider to make accessing the cookie easier I do it in my own application
You kind of end up making your own hook so anywhere you need access to the data from the context provider you would do something like const profile = useProfile()
Rainbow trout
just make a hook that fetches the user data and cache it for however long you want using react cache
https://react.dev/reference/react/cache
https://react.dev/reference/react/cache
use the hook wherever you need it in your codebase without worrying about the amount of api requests
should i do a context provider or a custom hook?
Rainbow trout
two different things, wouldn't say something is better
if you use SSR with server components, I'd definitely go with my suggestion, otherwise you end up with a lot of prop drilling I guess
They both have pros and cons. I prefer a context provider.
@Jboncz They both have pros and cons. I prefer a context provider.
Thing is with context
It's not the best for transferring a lot of data
Throughout the site
You shldnt dump a bunch of objects and things in it cause anything dependnt on context will rerender
Only if the context changes no?
@Jboncz Only if the context changes no?
Yea, thing with context is that it rerenders if anything changes in context... Even if the thing changed isn't something you depend on in that page
Gotcha agreed but something like a profile context shouldn’t be something that really changes. I get your point though.
Your making me question my implementation now 😂 when I get home ima post how I do it and see if you think it’s better to use a hook
@<ragewire/> yes, so my plan is on each page load, it calls getuserdata but then i dont want to have to recall getuserdata api route everywhere. only once per page load. im using page router btw.
Sedge Wren
I think Tanstack query is the way to go in this case. If you're using redux, then check RTK Query.
TanstackQuery is overkill if this is it's only usecase
Tbh for something like user data, it's best to keep it in cookies. Context could work but you don't want to keep a lot of data inside context + on refreshing the page context will just get removed
Cookies is persisted and with no end duration it becomes session which deletes itself when the site is closed
so i should use cookies to store some userdata?
can you store json in a cookie?
Yes to both
You can store any text data in a cookie, you just have to convert it back to json when you read it.
https://nextjs-forum.com/post/1259147833605357650 you can look at my solution here for an idea.