Next.js Discord

Discord Forum

Resolving Stale State Issues in Client Component Navigation

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
I’m using "next": "14.2.14" with Node.js v20.10.0 and encountering an issue with stale data on my user profile page.

What’s happening:

1. When I update user data on the profile page, the updates display correctly on the page.
2. However, after navigating to a different page using the next/link tag and then returning to the user profile page, the old (pre-update) data is shown instead of the updated data.

What I’ve tried:

- I set both dynamic and static staleTimes to 0, expecting the page to re-fetch data on navigation.
- Despite this, the router seems to cache the page and doesn’t re-render it on request.

Additional Notes:

- The build process indicates that the user profile page is a dynamic route.
- The only workaround I’ve found so far is to manually refresh the page after updates, but I expected staleTime to handle this behavior.

My Question:

Am I misunderstanding how staleTime works in this context, or is there another approach I should consider to ensure fresh data is displayed on navigation?

6 Replies

if u want to purge the clientside cache u have to use router.refresh (client) or revalidatePath in the action
also staleTimes is experimental
Polar bearOP
Without stalesTime parameter it still caches the data
What is the point of this option
Polar bearOP
I created a custom link tag that refresh that invalidate the cache of the page.
"use client";

import { useRouter } from "next/navigation";
import React from "react";

type CustomLinkProps = {
  href: string;
  children: React.ReactNode;
  className?: string;
};

const CustomLink: React.FC<CustomLinkProps> = ({ href, children, className }) => {
  const router = useRouter();

  const changeRoute = (url: string) => {
    router.push(url);
    router.refresh(); // Ensures a hard refresh for the new page
  };

  return (
    <a
      href={href}
      className={className}
      onClick={(e) => {
        e.preventDefault(); // Prevent default link behavior
        changeRoute(href);
      }}
    >
      {children}
    </a>
  );
};

export default CustomLink;