Next.js revalidate, force-dynamic or no-cache/store are not working for Dynamic Route on Next js App router (if the dynamic path is similar)

[stanley355]

Summary

1. I'm working on next js dynamic route, the file path looks like this:

- app
- - main
- - - roles
- - - [id]
- - - - page.tsx
- - - page.tsx

2. I access the roles page (/main/roles/page.tsx) that shows a list of users then when I click one of the list it will redirect (with router.push()) to /main/roles/[id]/page.tsx. In this case, the pathname and is /main/roles/26.

3. The /main/roles/[id]/page.tsx lookS like this:

interface RoleDetailProps {
  params: Record<string, string> | null;
}

export const fetchRoleDetail = async (
  id: string,
): Promise<"STAFF" | "SUPERVISOR"> => {
  const url = `${process.env.NEXT_PUBLIC_BASE_API_URL}/role/info/${id}`;

  try {
   const { data } = await axios.get(url);
    return data;
  } catch (error) {
    return error?.response?.data;
  }
};

const RoleDetail = async (props: RoleDetailProps) => {
  const { params } = props;

  const token = cookies().get("token");
  const role = await fetchRoleDetail(params?.id);

  return (
    <div>
      <Breadcrumb
        items={[
          { label: "Role", href: "/main/role" },
          { label: "Update Role" },
        ]}
      />
      <h1 className="text-3xl font-semibold">Update Role</h1>
      <RoleUpdateForm currentRole={role} />
    </div>
  );
};

export default RoleDetail;

4. The issue comes when I updated the user role e.g. (from "staff" to "supervisor"). It was updated on the client side on /main/roles/26 page with useState hook, however when I click the breadcrumb to /main/role page and click the same user again to /main/roles/26. The fetchRoleDetail function still returns the user as "staff" not "supervisor". It persists on returning "staff" no matter how many times go back and forth with The breadcrumb, user list, or going to another page. It will return as "supervisor" only if I refresh the page via browser.

5. Notes:

• Try with /main/roles to /main/roles/26 the [id] we go back and forth should be the same to reproduce this issue. If we went to /main/roles/27, it fetches another data.
• The fetchRoleDetail function still returns the user as "staff" not "supervisor" only in the frontend, the backend indeed already returns supervisor as I checked it via Postman
• I tried these, but nothing works:
• https://nextjs.org/docs/app/building-your-application/data-fetching
• https://nextjs.org/docs/app/building-your-application/rendering/server-components
• https://nextjs.org/docs/app/building-your-application/caching
• using fetch not axios

6. The desired result is for the fetchRoleDetail to refetch without cache every time we go back to the page.

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:59:33 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8112
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 18.20.3
  npm: 10.7.0
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // There is a newer version (14.2.4) available, upgrade recommended! 
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

### Example

_No response_