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 });
}
}