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'.

[remi-k-work]

Thank you all for the help! As I mentioned, I have been struggling with the issue of intercepting routes working together, particularly with the “cacheComponents” feature being enabled. In the back of my mind I knew that I must have been making a silly and stupid “mistake,” but I could not have figured it out.

The confusing and misleading part was that when I was originally developing the app with the “cacheComponents” turned off, I would never get any kind of errors even after deploying. The core issue, which was the wrong file structure (more about this in a second), did not stop the app from working even after deploying.

After enabling the “cacheComponents” feature (I am still using the wrong file structure), everything functions properly on my development machine. However, after deployment, it begins to crash with “404” errors. Link prefetching fails to work, and modals sometimes open and sometimes do not.

To avoid boring you further and embarrassing myself in the process, here is the key section from the excellent Next.js documentation that I should have reviewed more often:
https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes#defaultjs

Specifically the part:

Additionally, since children is an implicit slot, you also need to create a default.js file to render a fallback for children when Next.js cannot recover the active state of the parent page.

So, adding one little “default.tsx” below solved all my problems:

[trebordng]

This actually works perfectly. Thank you for sharing!