How would i do this

[rain brook]

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?

[cloud spire]

Post created!

🔎 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)

[rain brook]

please do not suggest nextauth as when ever i try to get user data on the client i get this error

[rain brook]

anyone going to help?

[hearty pulsar]

@rain brook 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

[strange tree]

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

[rain brook]

ok

[rain brook]

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.

[hearty pulsar]

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

[rain brook]

@hearty pulsar i heard about something called a context provider api

would that be good for this case?

[strange tree]

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()

[lean blaze]

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

use the hook wherever you need it in your codebase without worrying about the amount of api requests

[rain brook]

is that better then context api?

should i do a context provider or a custom hook?

[lean blaze]

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

[strange tree]

They both have pros and cons. I prefer a context provider.

[hearty pulsar]

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

[strange tree]

Only if the context changes no?

[hearty pulsar]

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

[strange tree]

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

[narrow edge]

I think Tanstack query is the way to go in this case. If you're using redux, then check RTK Query.

[strange tree]

TanstackQuery is overkill if this is it's only usecase

[hearty pulsar]

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

[rain brook]

so i should use cookies to store some userdata?

can you store json in a cookie?

[hearty pulsar]

Yes to both

[strange tree]

You can store any text data in a cookie, you just have to convert it back to json when you read it.