I'm using caching in a server side fetch requests to an api:

export async function fetchResults({q}: {q: string}) {
  const url = 'http://localhost:8000/api'
  const response = await fetch(`${url}?q=${q}`, {
    next: {
      revalidate: 10
    }
  })
  return await response.json()
}

And that is working properly in the server side, so my api is getting hit after 10 seconds when a new request is made, so far so good.

In the client side, the fetch request is triggered when the user types in an input field, on every key press, and that is the problem, the first key pressed triggers the request to nextjs server correctly and the RSC comes back properly, then when the character is deleted and typed again, no request is made unless I wait several seconds to re type it. First I thought that some Cache-Control headers may be caching the response for some time in the browser, but the 'no-store' and 'must-revalidate' cache control is being received in the client side and the expected behavior should be asking to the nextjs server on every key press immediately and not after many seconds. The network inspector is empty when re typed the same character.

Any thoughts on what may be happening?

Thanks in advance.