Firestore Data not updating when using Next App Router

16 views Asked by At

I have a Next JS App Router project using Firestore from the firebase-admin package so I can take advantage of SSR. However, I am getting stale data in production once deployed to Vercel. In development on localhost I get fresh data.

Here is my code for my Admin Page;

export default async function Admin() {
  const cookie = cookies();
  const authToken = cookie.get("firebaseIdToken")?.value;

  if (!authToken) {
    return redirect("/log-in");
  }

  let user;
  try {
    user = await auth.verifyIdToken(authToken);
  } catch (error) {
    console.log(error);
  }

  const admin = user?.role === "admin";

  if (!admin) {
    return redirect("/log-in");
  }

  let items = [];
  // const response = await fetch("http://localhost:3000/api/admin", { cache: "no-store" });
  const response = await fetch("https://MYDOMAIN/api/admin", { cache: "no-store" });
  if (response.ok) {
    items = await response.json();
  }

  return (
    <main>
      {items.map((item, index) => {
        return <div key={index}>{item.count}</div>;
      })}
    </main>
  );
}

I am getting the data but when I change the data in the Firestore console and refresh the page - I am not getting the updated values. I appended the option of cache: "no-store" to the fetch request as pointed out here. I thought this might be a caching issue however, I am still getting old data. what am I missing here?

API Code;

import { firestore } from "@/firebase/server";
import { NextResponse } from "next/server";

export async function GET() {
  try {
    let documents = [];
    const snapshot = await firestore.collection("admin").get();
    snapshot.forEach((doc) => {
      documents.push({ id: doc.id, ...doc.data() });
    });
    return NextResponse.json(documents);
  } catch (error) {
    return new NextResponse(`Internal Error: ${error.message}`, { status: 500 });
  }
}
0

There are 0 answers