Cache problem on production

Help
1

Hi everyone!

I’m facing an issue with my Next.js project in production.

I have an API route called getCount that looks like this:

import { NextRequest, NextResponse } from "next/server";
import { supabase } from "@/lib/supabaseClient";


export async function GET(request: NextRequest) {
  try {
    const count = await getCount();

    return NextResponse.json(count);
  } catch (error) {
    // console.error(error);
    console.log("errorrrr");
    return NextResponse.json({ error });
  }
}

const getCount = async () => {
  try {
    const { data, error } = await supabase
      .from("counter")
      .select("count")
      .eq("id", 1)
      .single();

    if (error) throw error;
    return data.count;
  } catch (error: any) {
    console.error("Error getting count:", error.message);
    return 0;
  }
};

The API is quite simple—it fetches a single record from my Supabase database and returns the count value.

The problem is that it works locally as expected, but in production (hosted on Vercel), it only fetches the data once. After that, the data never updates, even though it changes in Supabase. The only way to get the updated value is by redeploying the app, which obviously isn’t convenient.

I suspect this might be a caching issue, but I’m not sure what I’m doing wrong.

How can I fix this?

Thanks!!

2

Hi, @benoitded!

Thank you for providing the details of your issue. It does indeed sound like a caching problem.

In Next.js, API routes can be cached by default in production to improve performance. However, in your case, you need real-time data.

You’d need to add two export statements:

  1. export const dynamic = 'force-dynamic'; tells Next.js to always render this route dynamically.
  2. export const revalidate = 0; sets the revalidation time to 0, meaning it should revalidate on every request.

In the GET function, you can modify how you return the response by:

  1. using NextResponse.json(count).
  2. setting a Cache-Control header on this response to prevent caching.
  3. adding no-store directive tells the browser and CDN not to store this response.
  4. max-age=0 sets the maximum age of the cached content to 0 seconds.
Example 
import { NextRequest, NextResponse } from "next/server";
import { supabase } from "@/lib/supabaseClient";

export const dynamic = 'force-dynamic';
export const revalidate = 0;

export async function GET(request: NextRequest) {
  try {
    const count = await getCount();

    const response = NextResponse.json(count);
    response.headers.set('Cache-Control', 'no-store, max-age=0');
    return response;
  } catch (error) {
    console.error("Error in GET request:", error);
    return NextResponse.json({ error: "An error occurred" }, { status: 500 });
  }
}

const getCount = async () => {
  try {
    const { data, error } = await supabase
      .from("counter")
      .select("count")
      .eq("id", 1)
      .single();

    if (error) throw error;
    return data.count;
  } catch (error: any) {
    console.error("Error getting count:", error.message);
    return 0;
  }
};

Some helpful resources:

Let us know how you get on!

3

Amaziinngg, thanks!

Indeed, it solved the problem and it is now working as it should, thanks!!

1 Like
4

Great to hear, @benoitded! Would love to also hear what you’re building. Let us know :smile:

5

This is for https://checkeigen.byzantine.fi/ and https://checkdrop.byzantine.fi/

I don’t know if you’re familiar with cryptocurrencies, but this went a little viral so I got many users, so I wanted to add a trust on the page

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.