Next.js Discord

Discord Forum

<Link> caching pages on navbar

Answered
Elite posted this in #help-forum
Open in Discord
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 I 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.

On the connections form submit I did revalidatePath(“/bridge”) and so now the buttons that short link between the pages work as intended.

However navigating between the pages using the navbar still seems to cache them.

What can I do?

any idea?
Answered by Arinji
Clear when they submit the form, to disable the client cache you can use state times
View full answer

42 Replies

Arinji
this is called router cache @Elite
@Arinji https://nextjs.org/docs/app/building-your-application/caching#4-nextjs-caching-on-the-client-router-cache
EliteOP
so how would i clear it when users navigate between pages? or would i clear when they submit the form
@Elite so how would i clear it when users navigate between pages? or would i clear when they submit the form
Arinji
Clear when they submit the form, to disable the client cache you can use state times
Answer
rn i do this when the user submits a form (as a server action)
Arinji
Yes
Revalidate will remove the client cache
If you want to disable client cache all together
I wouldnt use this
@Arinji Revalidate will remove the client cache
EliteOP
so i did revalidate path, (the code above). but it is still caching the navbar
@Arinji https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes
EliteOP
sorry for the extra ping but do you have any idea why? what i'm doin in the code above should be enough
@Arinji Can you show your navbar code
EliteOP
// import { NavigationMenuItem } from "@radix-ui/react-navigation-menu";
import Link from "next/link";

export default function NavBarElement(props: { link?: string; children: React.ReactNode }) {
  return (
    <Link
      href={props.link ?? ""}
      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>
  );
}

navbar element ^
What's the code you want to update
@Arinji I don't see anything which is meant to update
EliteOP
so the problem rn is the navbar is caching the connection and bridge pages
after the user submits the connection form, it gives more access on the bridge page. but if u use the navbar after submitting the form, and go to the bridge page. its cached to where you didnt have it unlocked.
unless u full reload
on connection form submit i do this:
  async function revalidateBridgeAndConnections(): Promise<boolean> {
      "use server";

      try {
        revalidatePath("/bridge");
        revalidatePath("/connections");
      } catch (error) {
        console.error("Error in revalidateBridgeAndConnections:", error);
        return false;
      }

      return true;
    }

----


const revalidateDataStatus = await revalidateBridgeAndConnections();
but the navbar is still caching the pages when navigating
Arinji
Hm
EliteOP
if not, then i can navigate freelty between the pages but it shows the old stuff before i submitted form
unless i relaod ofc
Arinji
Can you show the bridge page code
EliteOP
this has the code for each of the forms
Arinji
Also enable full fetch logging,
https://nextjs.org/docs/app/api-reference/next-config-js/logging
Arinji
And tell me what it says when you use the navbar to go to the bridge page after the form
@Elite to debug?
Arinji
Yes
It will show the caching rules
@Arinji Yes
EliteOP
well nothing seems to be logging
so when you go to the connections page, it has a few text boxes. once u fill them out, it saves them and when u come back to the form it showcases them again. so u can veiw ur past, and update them.


if i go the unauthorized page without submitting the connections form. it gives me an error to submit the form.
i submit the form. i navigate to the bridge page (via navbar) it works. (showing the protected content)

but if i go back to the connections form, it doesn't say i've updated.

so is that a caching issue with how im fetching and displaying the connections form user data on page load?
    // server action
    async function fetchUserData(userId: string | null | undefined) {
      "use server";

      if (userId) {
        try {
          const user: User | null = await getUser(userId);
          if (user) {
            return user;
          } else {
            return null;
          }
        } catch (error) {
          console.error("Error fetching user data:", error);
          return null;
        }
      } else {
        console.error("User ID is undefined");
        return null;
      }
    }

--------
  const {
    data: userData,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["userData"],
    queryFn: () => fetchUserData(userId),
    retry: 5,
    retryDelay: 500,
    staleTime: Infinity,
  });
EliteOP
ive set the tanstack query staleTime to infinity so its never cached
EliteOP
was an idiot
had to said staleTime to 0
thought it was other way around
and my links were fixed with the revalidatePath function
ty