Parallel Routes 404 When Used With CacheComponent

[phuctran1203]

All my parallel routes become 404 when combined it with cacheComponent in new Next 16+.
The problem only happens when I deployed project into Vercel.
Everything works fine when it runs on local.

More detail:

• Parallel route: @post_slot/(...)post/[postId]/page.tsx
• Dynamic route: post/[postId]/page.tsx

When I'm at /home and click Next Link, Intercepting Route (...)post will catch it instead of post , right? But I got 404 error.
if I open the direct link first, E.g: open post/123 -> post/123 opened successfully. After that I try to open parrallel again (...)post/123 and it opens post/123, not (...)post/123.
On the other hand, if I don't open post/123 first, then (...)post/123 will be 404.

post/123 means I opened it directly in URL browser's bar
(...)post/123 means I clicked to the Next Link

[MasterProvider]

Hi @phuctran1203, were you able to find a solution?
It seems like parallel routes might be broken starting in Next.js 16.x.

[phuctran1203]

I haven't fixed it. I just disabled cacheComponent temporarily to fix this issue. I'm gonna try @trebordng solution below soon and hope it'll work

[phuctran1203]

It works! You can try @trebordng 's solution. I added "use client" mark inside @post_slot/(...)post/[postId]/page.tsx

[trebordng]

Hi, I'm encountering the same error, currently my work around is turn that intercepted parralel route into a 'use client' file, then use the fetch function with 'use cache' in useEffect.

[phuctran1203]

Thank you, I'm gonna test it soon. I didn't think about this way. Makes sense 🤔

[phuctran1203]

It works, thank you ✨

[trebordng]

Glad it worked for you! They should definitely fix it though, I'm not a big useEffect fan.

[remi-k-work]

Would you guys mind sharing a code snippet for your workaround, please? I have been struggling with the same problem for a while. I am attaching some screenshots and my code snippets below:

The route that is being intercepted: ├ ◐ /notes/new 1h 1d

// react
import { Suspense } from "react";

// next
import { cacheLife } from "next/cache";

// services, features, and other libraries
// import { makeSureUserIsAuthenticated } from "@/features/auth/lib/helpers";

// components
import PageHeader from "@/components/PageHeader";
import BrowseBar from "@/features/notes/components/browse-bar";
import NewNoteForm from "@/features/notes/components/NewNoteForm";

// types
import type { Metadata } from "next";

// constants
export const metadata: Metadata = {
  title: "Total Recall AI ► New Note",
};

export default async function Page() {
  "use cache";
  cacheLife("hours");

  return (
    <>
      <PageHeader title="New Note" description="Use the form below to create a new note" />
      <Suspense>
        <BrowseBar kind="note-new" />
        <NewNoteForm />
      </Suspense>
    </>
  );
}

The intercepting route: ├ ○ /(.)notes/new 1h 1d

// react
import { Suspense } from "react";

// next
import { cacheLife } from "next/cache";

// components
import NoteModal from "@/features/notes/components/note-modal";
import BrowseBar from "@/features/notes/components/browse-bar";
import NewNoteForm from "@/features/notes/components/NewNoteForm";

// assets
import { DocumentPlusIcon } from "@heroicons/react/24/outline";

export default async function Page() {
  "use cache";
  cacheLife("hours");

  return (
    <NoteModal icon={<DocumentPlusIcon className="size-11 flex-none" />} browseBar={<BrowseBar kind="note-new" />}>
      <Suspense>
        <NewNoteForm inNoteModal />
      </Suspense>
    </NoteModal>
  );
}

[trebordng]

Would you guys mind sharing a code snippet for your workaround, please? I have been struggling with the same problem for a while. I am attaching some screenshots and my code snippets below:

The route that is being intercepted: ├ ◐ /notes/new 1h 1d

// react
import { Suspense } from "react";

// next
import { cacheLife } from "next/cache";

// services, features, and other libraries
// import { makeSureUserIsAuthenticated } from "@/features/auth/lib/helpers";

// components
import PageHeader from "@/components/PageHeader";
import BrowseBar from "@/features/notes/components/browse-bar";
import NewNoteForm from "@/features/notes/components/NewNoteForm";

// types
import type { Metadata } from "next";

// constants
export const metadata: Metadata = {
  title: "Total Recall AI ► New Note",
};

export default async function Page() {
  "use cache";
  cacheLife("hours");

  return (
    <>
      <PageHeader title="New Note" description="Use the form below to create a new note" />
      <Suspense>
        <BrowseBar kind="note-new" />
        <NewNoteForm />
      </Suspense>
    </>
  );
}

The intercepting route: ├ ○ /(.)notes/new 1h 1d

// react
import { Suspense } from "react";

// next
import { cacheLife } from "next/cache";

// components
import NoteModal from "@/features/notes/components/note-modal";
import BrowseBar from "@/features/notes/components/browse-bar";
import NewNoteForm from "@/features/notes/components/NewNoteForm";

// assets
import { DocumentPlusIcon } from "@heroicons/react/24/outline";

export default async function Page() {
  "use cache";
  cacheLife("hours");

  return (
    <NoteModal icon={<DocumentPlusIcon className="size-11 flex-none" />} browseBar={<BrowseBar kind="note-new" />}>
      <Suspense>
        <NewNoteForm inNoteModal />
      </Suspense>
    </NoteModal>
  );
}

Sorry I'm not on PC to give you an example, but as for your code, the route being intercepted doesn't need to change anything.

For the intercepted parralel route, remove 'use cache' and cache life from the component, remove async from the function and mark the page as 'use client'. Then in NewNoteForm component (I assume you need to fetch something in here), turn it into a 'use client' component, then put the fetch function in useEffect. Make sure you mark the fetch function as 'use cache'.