I'll post some code since i didn't before i'm still having this happen "randomly"

page.jsx:

"use server";
import { fetchWithCookies } from "@/app/actions";
import FolderListReorder from "@/components/client/FolderListReorder";
async function fetchFolders() {
  return await fetchWithCookies(`/api/folders`, "GET", {
    next: { tags: ["Folders"] },
  });
}
async function fetchChats(folder) {
  const titles = await fetchWithCookies(`/api/folders/${folder.id}`, "GET", {
    next: { tags: ["Chats"] },
  });
  return titles.map((title) => ({ ...title, folder: folder.id }));
}

export default async function Page({ params }) {
  const folders = await fetchFolders();
  const titlePromises = folders.map(fetchChats);
  const allTitles = await Promise.all(titlePromises);
  const chats = allTitles.flat();

  return (
    <>

          <FolderListReorder
            params={params}
            chats={chats}
            folders={folders}
          />
    </>
  );
}

actions.js (fetchwithcookies is just a helper script so i don't have to import cookies each time)

'use server';
import { cookies } from 'next/headers';
import { revalidateTag } from 'next/cache';
export async function handNewChat(formData) {
    try {
        const newChat = { title: "My new chat", folder: formData.get('folder') };
        const responseData = await fetchWithCookies("/api/chats", "POST", {
            body: JSON.stringify(newChat),
            headers: { "Content-Type": "application/json" }
        });
        revalidateTag("Chats"); //i tried doing it here just incase that would help
    } catch (error) {
        console.error(error);
    }
}
export async function fetchWithCookies(resource, method = 'GET', { headers, ...settings } = {}) {
    const options = {
        method: method,
        headers: {
            Cookie: cookies(),
            ...headers
        },
        ...settings
    };

    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${resource}`, options);

    if (!response.ok) {
        throw new Error(
            `Failed to fetch: ${resource} 
             received: ${response.status}
             reason: ${response.statusText}`,
        );
    }

    const responseData = await response.json();

    return responseData;
};

route.js mind you this works it just will not revalidate that tag

"use server";
import dbConnect from "@/db/util/Connect";
import Chats from "@/db/models/chats";
import Folder from "@/db/models/folders";
import { NextResponse } from "next/server";
import AuthCheck from "@/components/server/AuthCheck";
import { revalidateTag } from "next/cache";

const chatPost = async (req, res) => {
  try {
    const session = await AuthCheck();
    if (!session) {
      return NextResponse.json({}, {
        status: 400, statusText: "Please either sign in, or use an api key"
      });
    }

    await dbConnect();


    let { title, folder } = await req.json();
    const folderRecord = await Folder.findOne({
      _id: folder,
      $or: [{ owner: session.user.id }, { shared_users: session.user.id }]
    });

    if (!folderRecord) {
      return NextResponse.json({}, {
        status: 403, statusText: "User does not have permission to access this folder"
      });
    }
    const newChat = await Chats.create({ title, folder });
    revalidateTag("Chats");
    return NextResponse.json(newChat, { status: 200, statusText: "OK" });

  } catch (err) {
    return NextResponse.json(err,
      {
        status: 400, statusText: err
      }
    );
  }
};

export { chatPost as POST };

Bump still looking for help on this...

Okay i solved it if anyone gets these errors. You need to modify the revalidated on the server before sending it to a client component