How To DIsable Middleware Cache?

[Enkratia]

Summary

I need to disable cache for routes like "/profile/:path*" and "/dashboard/:path*
I have spend almost 3 days to find a solution and found nothing

Middleware:

• can't use "revalidatePath"
• can't use "revalidateTag"
• "x-middleware-cache": "no-cache" - doesn't make any difference
• "cache-control": "no-store" - doesn't make any difference

How To DIsable Middleware Cache For Pages?

Additional information

No response

Example

No response

[andr3wV]

Does anyone have an answer to this?

[Enkratia]

Still can't seem to get it to work. Do you put CommonHelper in middleware or in a the layout.tsx for the dashboard route?

Layout.tsx, of course, how would you add component to middleware.ts). Root layout of the app (close to body tag)

[Enkratia]

But you can add CommonHelper to the dashboard layout aswell

[andr3wV]

Ya idk it's refusing to work😭

[andr3wV]

This is what I have:

actions.ts

"use server";

import { headers } from "next/headers";

export const checkHeadersAction = async () => {
  return headers().keys();
};

CommonHelper.tsx

"use client";

import React from "react";
import { usePathname } from "next/navigation";
import { checkHeadersAction } from "./actions";

export const CommonHelper: React.FC = () => {
  const pathname = usePathname();

  React.useEffect(() => {
    const checkModalHeader = async () => {
      try {
        await checkHeadersAction();
      } catch (error) {
        console.warn("Failed to get headers");
      }
    };

    checkModalHeader();
  }, [pathname]);

  return null;
};

layout.tsx

import "@/app/(app)/globals.css"
import type { Metadata } from "next"
import Header from "./components/header";
import { CommonHelper } from "./CommonHelper";

export const metadata: Metadata = {
  title: "Dashboard",
}

export default async function Layout({ children }:  {children: React.ReactNode; }) {
    return (
        <>
            <CommonHelper/>
            <Header />
            {children}
        </>
    )
}

[andr3wV]

Maybe I'm implementing what you're saying incorrectly, but I am having no luck with that method. Here is what I have:

NoCache.tsx:

"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

const NoCache = () => {
  const pathname = usePathname();

  useEffect(() => {
    if (pathname.startsWith("/dashboard")) {
      // Force the browser to not cache the route
      const headers = new Headers();
      headers.set("Cache-Control", "no-store");
    }
  }, [pathname]);

  return null;
};

export default NoCache;

Layout.tsx which handles all the routes that I don't want to have cache:

import "@/app/(app)/globals.css"
import type { Metadata } from "next"
import Header from "./components/header";
import NoCache from "@/components/NoCache";

export default function DashboardPage() {
  return (
    <>
      <NoCache />
      <h1>Dashboard</h1>
      {children}
    </>
  );
}

Update: This actually does work. I thought it wasn't working because my <Link> components had prefetch enabled. @Enkratia thank you for you're help, I really appreciate it!

[Enkratia]

@andr3wV, glad to know, thank you for reply :)

[Enkratia]

@andr3wV, you shouldn't disable prefetch to get desired result. Adding these 2 small files in the project is all what you need to disable middleware cache, i just rechecked it myself.

(This is important to clarify that this topic is about middleware cache, not any cache.)