Next.js Discord

Discord Forum

fetch with revalidate

Unanswered
Tan posted this in #help-forum
Open in Discord
TanOP
I try to fetch data from an api, but have a restriction of 5 mins, so im using
next: { revalidate: 300}

I need to authenticate to access the api datas so i need to fetch from server side.
I need to display a value of that returned json in a <p> tag
And id like not having to refresh 2 times to get datas updated
I dont need it to refresh the datas every 5 mins, just when someone enters the page, or refresh the page, id like to not be needing to refresh again to get the datas updated

If you need more precise informations ask me i have no clue what else to say

176 Replies

TanOP
@Polar bear
@Tan <@597334583435853825>
Polar bear
alright
so to recap, u have data that needs to be updated every 5 min
if the user's screen is open for 5 min
it'll update automatically
is that it?
TanOP
nope, if the user screen is open 1hr i dont care about updating,
When he refreshes the page tho, i want it to be updated instantly, whereas right now, i need to refresh the page again to see the new updated datas
Polar bear
oooh
the data will be updated automatically dw
it just won't show unless u refresh
@Polar bear the data will be updated automatically dw
Polar bear
on the server
TanOP
yes, but to see the new datas on the page you need to refresh again
Polar bear
yep
TanOP
and i want to avoid that
Polar bear
if the revalidate didn't reach 300
it won't refetch
the data will stay the same
unless the time pases
revalidate = 300 means the data will be updated every 300 seconds on the server
if someone refreshes
and it's at 150 for example
it won't get new data
until the revalidate happens
makes sense?
the data will stay the same don't worry
until it revalidates
TanOP
ive read something, it said that when you try to get the data that needs to be revalidated, it still returns the previous data, and only the next time you will get the refreshed data
Polar bear
when the time passes
TanOP
yes
Polar bear
yup
it was an example ig
dw
it's cached
for 300 seconds
it'll fetch the cached one
only until the revalidate time ends
it'll refetch
then caches
and the loop goes on
TanOP
wait ill try to give you a good example
Polar bear
alright
TanOP
i fetch, and the response is '1'
then i wait 200s and i refresh, the data will still be 1 cause no matter what its not updated, i understand that

But if i wait for exemple 500s, the revalidate timer is past,
so when i refresh, it still shows me 1 and then fetch the api again to replace the 1 with the new data (lets say 2)

So on my page it still shows 1, even tho the data is now 2, but i need to load the page again to show 2
Polar bear
I'm not sure why this happens maybe cuz this is locally
TanOP
ive seen this is just how revalidate works
Polar bear
I guess it sends the last cached thing
then revalidates
idk
TanOP
yup thats it
Polar bear
either way it's not an issue tho
TanOP
i mean when you get on the page, you see wrong datas, and need to refresh in order to see the correct data so its a bit of a problem
when you go on a website you usually dont need to instantly refresh
maybe this is helpful
I'm sure this isn't the case
it revalidates immediately
TanOP
ive found what i was talking about
i didnt found anything usefull on the internet about this problem thats why i came to discord...
Polar bear
ye so it's waiting for a user's request
what u can do is add a router refresh
when they fetch
it refreshes
TanOP
but i cant i na server component, and need to fetch from server
@Tan but i cant i na server component, and need to fetch from server
Polar bear
use a websocket then
tho it's for realtime
TanOP
i never used that kind of thing im still new, but i will check that then
Polar bear
@Tan I found a solution
u gotta use cronjobs
TanOP
so if im right, i can start a timer with cronjobs when i fetch, and then if the timer isnt ended i use the cached data otherwise i can fetch again?
Polar bear
basically
TanOP
and i wont have the same problem?
Polar bear
it'll act as the first person who fetches
it's like a thing that'll request from ur server
if it does
Nextjs Will revalidate
got it?
cuz it revalidates only after the first request
which what cornjobs do
TanOP
so cronjobs sends request to my server every x time?
Polar bear
yep
make it's ever 300
so it triggers new data
or set to 0 no cache
TanOP
but then ill fetch the data every 300 even if nobody opens the page?
Polar bear
yep
or u can do no cache
so fetch upon request
TanOP
the api im fetching limits it to 5 mins between each request to avoid spam
Polar bear
ooo
damn
TanOP
and if i do it with websockets instead how would this work?
Polar bear
it'll create a realtime connection
maybe u can configure it to update every 5 min
TanOP
and it will update everytime the data is fetched again directly on the page?
Polar bear
ye
TanOP
did you ever used it?
Polar bear
for a chat app
a year ago
TanOP
ok, not to hard to apply for a beginner noob like me ? x)
Polar bear
nah
TanOP
ok cool, ill try that then
Polar bear
u don't seem a noob either
u know ur stuff well
TanOP
i am, its my first project bro
Polar bear
but u know ur things
u research well
TanOP
i mean 2nd but the first one is a mess
Polar bear
u just came here to find s better solut
alright good luck
try "pusher" maybe
or liveblock
TanOP
what is that?
Polar bear
depends on ur use case
third party websockets
TanOP
oh so it is not just inside your app?
Polar bear
u can
but a nextjs request is max 10 sec
or 12
a websocket is always running
so you'd need a nodejs backend
and host
sucks
well not sucks but time consuming
TanOP
hum, but if my fetch takes less than 10sec then im good nah?
@Tan hum, but if my fetch takes less than 10sec then im good nah?
Polar bear
no the idea is that
a websocket always is connected
if u want to trigger it through the nextjs api router
it won't work
u want it to last 10 seconds?
it's meant to be up and running all the time
just listening
TanOP
you said
but a nextjs request is max 10 sec
Polar bear
ye
that's why it won't work on a Nextjs app
u need to go nodejs
I said that remember?
or use a third party api
TanOP
so if i do it like that, and that my fetch lasts less than 10 sec, then it wouldnt be fine?
Polar bear
which they take care of that
TanOP
cause idont need it to keep connected full time
Polar bear
first it won't work either way
TanOP
its jsut the time to update the datas after the refresh
Polar bear
second websockets are meant to be connected with ur server
all the time
that's how it works
if it disconnects that's an error
TanOP
ah ok
Polar bear
so either do revalidate = 0
which will get new data Upon request
or
cornjobs
or
one unlucky user would get an old data
u can keep a note saying refresh for changes or sth
that's how nextjs works
TanOP
ok, well ty for your time, ill try to see what fits better
Polar bear
or
one tricky thing u could do by urself
make the router refresh after a certain interval
like after 5 seconds one someone gets the data
that way they'd get real data
now u don't have client comp that's fine
listen to me
the data that u get from the server
don't u have h1 tag or p tag
make these into a component
and pass the data as a prop
and that'll be ur client component with refresh
that's a dirty way of doing it
@Tan makes sense?
TanOP
yes, i never did that too, ill try to see then how to pass data as props etc,
Also i got several datas like that on my pages so ill need several clients components? not sure if thats the best
Polar bear
fair enough
alright if these are ur questions mark sth as read or ask further
TanOP
hsould i close it?
@Tan hsould i close it?
Polar bear
if u keep it the mods will close it by marking sth as answer ig