Using force-cache prevents revalidation

[willemmulder]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/fetchcache-issue-h6gsf2

To Reproduce

1. Start the application
2. Refresh the page
3. Notice that it will always get the API call from cache and it will never revalidate

Current vs. Expected behavior

The cache is never revalidated, while it should (in this case every 5 seconds).

Note that the page is dynamic, so the issue is not that the page itself is statically rendered, but that, even when it is rendered dynamically, it uses the existing cache all the time and never revalidates.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 16298
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), Vercel (Deployed)

Additional context

Same issue on CodeSandbox, which is on NextJS 15 canary. In general, the revalidate setting does not seem to work when using force-cache.

[ShubhamOulkar]

Use only-cache:-

This option sets 'force-cache' if no option is provided on fetch() request. Where as default-cache sets 'force-cache' if no option is provided on fetch() request but it consider as static even after dynamic functions.

Use following in next-canary only (this creates dynamic rendering with cached data)

export const fetchCache = "only-cache";

Don't need to use fetchCache option in Next 14 because fetch() cached by default, use of dynamic functions will render dynamically.

[willemmulder]

@ShubhamOulkar Thanks, but I'm not sure if I understand correctly. So what I want is that all requests (also those after dynamic functions) are always cached (unless they specifically opt out using no-store), but that the cache is invalidated every 5 minutes. How would I do that in Next 14?

Note that I do use cookies/sessions/auth, so the functions are always rendered dynamically, but I do want the requests to be cached for 5 minutes.

What do you mean with the "but it consider as static even after dynamic functions." part?