Hi, first of all thank you in advance for your time.
I'm building an application helping me manage my finances. The problem I have is with data displayed in my application, which is not up to date with what is in DB. This works perfectly in local, which makes me think that this is more a problem with the cache system. But even when I purge the cache, it doesn't sync my data.

Here are some details about my environment:

- App deployed on Vercel
- I use swr to make request
- My backend use NeonDB
- All my requests are formatted like that (the important thing to note is the cache: 'no-store' thing which is supposed to always fetch latest data).
- I use appDir directory
- Both my page.tsx and layout.tsx file have export const revalidate = 0 , export const dynamic = 'force-dynamic', export const fetchCache = 'force-no-store'

Here are a few parts of my code in order to ease you to help me find a solution to my problem:

vercel.json

{
  "crons": [{
    "path": "/api/cron",
    "schedule": "0 4 * * *"
  }],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache, no-store, must-revalidate"
        },
        {
          "key": "Pragma",
          "value": "no-cache"
        },
        {
          "key": "Expires",
          "value": "0"
        }
      ]
    }
  ]
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

In order to fetch data, I use a hook that looks like this:

const { data, error, isLoading } = useSWR<number>('/api/amountLeft', (url) =>
    fetch(`${baseUrl}${url}`, {
      cache: 'no-store',
    }).then((res) => res.json())
  )

When I update data and want my view to be up to date, I use this syntax

await mutate('/api/amountLeft')