Next.js Discord

Discord Forum

Can't get latest data from fetch call, any help is appreciated!

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Hello,

I've been trying to finally find a solution to a recurring problem I've been having for months.
I can't get the latest data when navigating to a dynamic page.

Example: I add a new favorite from the homepage, I navigate to the /favorites via the <Link/> component, but the newest favorite doesn't appear. I have to refresh the page to get it.

Here is my implementation:

In the /favorites page:

Added the noStore() at the top of the fetch function (as shown in the new -Learn Nextjs- doc)

Added the revalidate 0 & cache: no store in the fetch call

In the api route /select-all

Added the constant revalidate 0

Added the revalidatePath function

However, I still don't get the latest data when navigating to the /favorites page.

If you have any recommendations, it would be highly appreciated.

Thanks!
Answered by riský
i think you should read about the cache: https://nextjs.org/docs/app/building-your-application/caching#router-cache
View full answer

63 Replies

riský
could this be from the local browser cache of the page instead?
as that does prefetch and uses prev data to not need a new request
Ray
try fetch directly from database in the page component instead of fetching from the self api?
you doing revalidatePath in the GET endpoint which only run when the page load
so the new data appear in second render
riský
oh lol i didn't even realise they were fetching own api 😭
Masai LionOP
@Ray Oh wow thank you for this info! I'll try to fetch directly from the server component. In the case of fetching from the API, would there be any way of obtaining the same result?
Thanks a lot guys I appreciated it!
Is the revalidatePath necessary when fetching from the component? What would be the correct way of using it?
(sorry for all the questions, I've been struggling with this for months)
Ray
you should avoid fetching the own api in server component
https://nextjs-faq.com/fetch-api-in-rsc
if you want the page to be ISR, you can put export const revalidate = 10 on the page
Masai LionOP
Ok! I'll read the faq you sent me, it's full of useful info and try to fetch directly from the component. Thanks a lot again @Ray you made my day.
riský
yet us know when it works 🙂
Masai LionOP
Ok so I just deployed with the new strategy but still doesn't work 😦
I'll try to play with the different parameters (export revalidate/dynamic etc) to see if something works
I just used the "noStore()" from the Nextjs Learn doc, maybe it's not enough
Ray
the data not updating?
try run next build, there is a report after it
and see the page is static generated or dynamic
Masai LionOP
Nope, I have to refresh the page! I'm on the homepage, I add a nex favorite, navigate to the /favorites via the <Link/> component, and the data isn't updated
Ok 🙂
Ray
refresh the page and it shows new data?
Masai LionOP
Yes!
it should be dynamic :/
Ray
try next start and see if it works?
Masai LionOP
Ok so, an update:
When i click the first time on the /favorite link
Sometimes it fetches the favorites, sometimes it doesn't
Clicking it a second time request the fetch call
So must be a problem with how the cache is handled? This is all in prod env
I'll do some tests and let you know!
Ray
try run next start locally and see if it work
riský
but if you use a link instead of next/link does it still cache?
as i think the actual client cache may be doing things here
@Ray try run next start locally and see if it work
Masai LionOP
I'm having this error: (I deleted .next as suggested by a reddit user)
@riský but if you use a link instead of next/link does it still cache?
Masai LionOP
It works if I use an <a> link!
Ray
run next build again
Masai LionOP
Okay
(ok server works now, I'll try it)
(thanks!)
Ray
oh if <a> work then I think you hit the router cache
riský
yeah that is what i could think of
as server cache was basicly removed in his code
Masai LionOP
With next start: Worked the first time, I tried again and didn't get the latest favorite, I don't understand why the behavior changes
Ray
wait for 30sec then try to navigate it again
Masai LionOP
Okay
riský
i think you should read about the cache: https://nextjs.org/docs/app/building-your-application/caching#router-cache
Answer
riský
and have a look at their invalidation strategies to fix
Masai LionOP
Ok I'll try this and let you know. Thanks again
Masai LionOP
Ok! So after many attempts, the solution was to change the create favorite strategy: I previously made a axios POST request to create the new favorite. I changed it to a server action + added a revalidatePath('/favorites'). My question now is, what would be the best pattern to follow on the client component? Server Action + revalidatePath, SWR + revalidatePath (not tested yet), need your opinion on this! Thanks again
(the any type is temporary for the tests)
Ray
I prefer server action + revalidatePath since we can reduce the javascript sent to the client
@Masai Lion Click to see attachment
Ray
this should update the cache accordingly right? I didn't know you are creating new data in the application
Masai LionOP
Yes, I have a button that creates a new favorite on the homepage and I then click on the Link button to the /favorites that should show all of the favorites data
So yes SA + revalidatePath works!
I've learned quite a lot today, thanks again for the help
riský
glad you worked out the strategy to solve in the end, and thanks Ray for explaining how to actually do this :))