<Link> caching pages
Answered
Elite posted this in #help-forum
EliteOP
so i have a route that needs a form filled out before (the connections page) they can properly visit / use that page. (bridge page).
if the user visits the bridge page without filling out the form on the connections page, it shows an error, "you must add a connection to proceed" and gives a link to the connections page. now on this page after the user adds their info and submits it, it shows a link back to the bridge page. however the bridge page still shows the error until we manually relaod (ctrl + r).
same thing with my navbar elements. they seem to cache page load stuff. so if the user switches between those navbar links, same issue.
im using Next/Link elements everywhere, and have set
any idea?
if the user visits the bridge page without filling out the form on the connections page, it shows an error, "you must add a connection to proceed" and gives a link to the connections page. now on this page after the user adds their info and submits it, it shows a link back to the bridge page. however the bridge page still shows the error until we manually relaod (ctrl + r).
same thing with my navbar elements. they seem to cache page load stuff. so if the user switches between those navbar links, same issue.
im using Next/Link elements everywhere, and have set
prefetch={false}any idea?
Answered by James4u
@Elite exactly, those pages are prefetched and cached.
What you can do is
What you can do is
prefetch={false} or you should use revalidatePath32 Replies
@Elite exactly, those pages are prefetched and cached.
What you can do is
What you can do is
prefetch={false} or you should use revalidatePathAnswer
to purge the cache
EliteOP
ive done
prefetch={false} for all those linksdo i need to do revalidatePath as well?
nope, if you do
prefetch={false} - you don't need to do revalidatePathrevalidatePath() is when you don't want prefetch={false}so right after the form submission, you can
revalidatePath()then when you navigate to that page using
next/link you will get revalidated dataEliteOP
so your saying I shouldn't do
and as the form submits, revalidate that path.
but then what about in my navbar. its still cached there.
prefetch={false}? i did the prefetch is false and I still get the same thingand as the form submits, revalidate that path.
but then what about in my navbar. its still cached there.
EliteOP
sorry for the other ping, but do i do this instead of
what about my navbar tho, do i revalidate as well when button clicked
prefetch={false}?what about my navbar tho, do i revalidate as well when button clicked
what dynamic data do you have inside your navbar?
EliteOP
no
so my navbar has references to the bridge and connections page. which are completely dynamic.
if the user visits the bridge page without filling the form on connections, it shows an error and gives them a button to get redirected to the connections page form. then if they fill it out, they get another button to go to the bridge page. however, the bridge page is cached (still thinking they don't have connections), unless they reload.
and same thing if they navigate between the pages via the navbar, unless they
so my navbar has references to the bridge and connections page. which are completely dynamic.
if the user visits the bridge page without filling the form on connections, it shows an error and gives them a button to get redirected to the connections page form. then if they fill it out, they get another button to go to the bridge page. however, the bridge page is cached (still thinking they don't have connections), unless they reload.
and same thing if they navigate between the pages via the navbar, unless they
ctrl + r it shows old errorsso that's what I told you before, after filling the form and submission, if you do
revalidatePath('/bridge'); clicking a link to bridge page in navbar shouldn't be cachedEliteOP
so
so this is a navbar element component. should i remove the
and similarly if the error exists, i show these messages (along with the button link):
and the form submit message:
how would i set the revalidate here
<Link
href={props.link ?? ""}
prefetch={false}
className="flex items-center tracking-wider whitespace-nowrap text-sm h-full font-light p-2 hover:text-white text-slate-300 transition-colors duration-500"
>
{props.children}
</Link>so this is a navbar element component. should i remove the
prefetch={false} and where would i set the revalidate?and similarly if the error exists, i show these messages (along with the button link):
<div>
<h1 className="text-red-500">
Unable to fetch user data. Please add valid connections or reload and contact support.
</h1>
<Link href="/connections" prefetch={false} className="text-blue-500">
Go to connections
</Link>
</div>and the form submit message:
<h1 className="text-xl">
Head over to{" "}
<Link href="/bridge" prefetch={false} className="underline strong ">
/bridge
</Link>{" "}
to start bridging! 🌉
</h1>how would i set the revalidate here
you need to revalidatePath right after form submission, inside server action
EliteOP
so i should remove all my prefetch options, and revlidate the bridge page after form sub
but then what about the navbar caching all the pages
bridge page and connection page
EliteOP
alr so when the connections form is submitted i do that?
those won't be cached after you
revalidatePath()EliteOP
how long does the revalidate last
revalidatePath() is for purging cache from cached pagesEliteOP
alr
and ill remove my prefetch optiosn and keep em default then
until you revalidate or hard-refresh
yeah
EliteOP
alr
EliteOP
ok so when i submit the form, the linsk between the bridge pages are fully dynamic now. but the navbar isnt. if i switch between connections and bridge it uses the first insance version. unless i hard reload
EliteOP
hey do you have any idea why the navbar is still caching it?
after form submit, the links are fine now
EliteOP
Ye I’ve tried that. Still navbar is caching
Not sure what to do