Next13 caching fetched data even with the 'revalidate = 0' route segment
Problem
Verify canary release - [x] I verified that the issue exists in the latest Next.js canary release Provide environment information [code block] Which area(s) of Next.js are affected? (leave empty if unsure) App directory (appDir: true), Data fetching (gS(S)P, getInitialProps) Link to the code that reproduces this issue or a replay of the bug https://github.com/EvandrooViegas/outsystem-angola To Reproduce 1. clone my repo 2. run `npm install` in the root of the cloned repo 3. run `npm run dev` Describe the Bug Next13 seems to be caching the data coming from supabase even with the `revalidate = 0` route segment. Expected Behavior Get the freshest data in every page request Which browser are you using? (if relevant) chrome How are you deploying your application? (if relevant) _No response_
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Disable Caching for Supabase Data Fetching in Next.js
Next.js may be caching the response from Supabase due to the way data fetching is handled in the app directory. Even with 'revalidate = 0', the caching behavior can persist if the data fetching method does not explicitly prevent caching or if the response headers are not set correctly.
Awaiting Verification
Be the first to verify this fix
- 1
Update Data Fetching Method
Modify the data fetching method to ensure it does not cache responses. Use the 'fetch' API with appropriate cache options.
typescriptconst response = await fetch('https://your-supabase-url', { cache: 'no-store' }); - 2
Set Response Headers
Ensure that the response headers from Supabase are set to prevent caching. This can be done by configuring the Supabase API to include headers like 'Cache-Control: no-store'.
typescriptheaders: { 'Cache-Control': 'no-store' } - 3
Verify Route Segment Configuration
Double-check the route segment configuration to ensure 'revalidate = 0' is correctly applied. This should be set in the page component or API route where the data is fetched.
typescriptexport const dynamic = 'force-dynamic'; - 4
Test Data Fetching
After making the above changes, test the application by running `npm run dev` and checking the network requests in the browser's developer tools to ensure fresh data is being fetched on each request.
bashnpm run dev - 5
Monitor for Caching Issues
Continue to monitor the application for any caching issues. If caching persists, consider using a different data fetching strategy or library that provides more control over caching behavior.
Validation
Confirm that the data fetched from Supabase is fresh on every page request by checking the network tab in the browser's developer tools. The response should not be cached and should reflect the latest data from the database.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep