Nextjs 13 Api Route remains static when calling with cache:no-store

Question

I am building a web-application with nextjs.13, react and firestore. I created a api route for fetching data from firestore with no-cache (SSR). In development mode everything works fine, but when i build the project, nextjs renders my api route static, so i receive old data. Is there a way around how to create a SSR Api route?

This is my GET-Request in my Dashboard page.jsx:

const getExamDate = async () => {
  const response = await fetch("http://localhost:3000/api/ExamInfo", {
    cache: "no-store",
  });
  const data = await response.json();
  if (data) {
    console.log("fetched again");
  }
  return data;
};

This is my created API-Endpoint which accesses the Firestore Data:

export async function GET() {
  try {
    const Exams = [];
    const documentInfo = await getDocs(collection(db, "Exams"));
    documentInfo.forEach((doc) => {
      Exams.push(doc.data());
    });
    console.log("API: ", Exams);
    return NextResponse.json({ Exams, status: 200 });
  } catch (error) {
    console.error(error);
    return NextResponse.json(
      { error: "Failed to fetch exam data" },
      { status: 401 }
    );
  }
}

And this is the result when building:

○ /  
├ ○ /api/ExamInfo (static)  
├ λ /Dashboard (SSR)

So for my Dashboard everything works fine and its server side rendered, but my api endpoint remains static, which results in getting old data (Buildtime data). How do i configure my Endpoint also SSR, so i get the current data for each request?

UPDATE: There is a workaround to force the Endpoint to fetch for every request: By adding the request parameter, and logging it for each endpoint call, the API-Route is called for every request:

export async function GET(request) { //passing the request as parameter
  console.log(request.url); //Logging the URL
  try {
    const Exams = [];
    const documentInfo = await getDocs(collection(db, "Exams"));
    documentInfo.forEach((doc) => {
      Exams.push(doc.data());
    });
    console.log("API: ", Exams);
    return NextResponse.json({ Exams, status: 200 });
  } catch (error) {
    console.error(error);
    return NextResponse.json(
      { error: "Failed to fetch exam data" },
      { status: 401 }
    );
  }
}

But in my opinion this isn't the right way to do, so does anyone know the "right way" of fetching the data from the endpoint for each request on server side?

Answer 1

If you want to implement a cleaner solution then you can instead add export const dynamic = 'force-dynamic' to your API route.

According to the documentation, "this option is equivalent to:

• getServerSideProps() in the pages directory.
• Setting the option of every fetch() request in a layout or page to { cache: 'no-store', next: { revalidate: 0 } }.
• Setting the segment config to export const fetchCache = 'force-no-store'"