also i realized that if i fetch within 10 seconds, cached data is shown, if i fetch after 20 seconds for the first time, the stale data is not shown, new updated data is immediately shown even though it states in the docs that first request after revalidation period passes, will give back the stale data

The caching strategy is “stale while revalidate” (like [this](https://web.dev/articles/stale-while-revalidate))

which means that after 10 seconds, when the cache is considered “stale”, you might still get the stale value, but since 10 seconds have elapsed, a “revalidate” is kicked off in the background, which will be finished for the following request

so like:
- 0 seconds: no data in cache; fetch data, and wait for data before returning
- 5 seconds: data is not stale, return cached data
- 11 seconds: data is stale, return slightly stale cached data and kick off revalidation in the background
- 15 seconds: revalidation caused by the previous request has completed; return updated data

The upcoming redesigned dyamicIO caching system (which is currently experimental in Next 15) will allow you to more explicitly control the separate time limits for “stale while revalidate” vs “truly stale enough to expire”

You’ll be able to set a separate revalidate value (for kicking off backgound revalidation of stale data) and expire value (for removing the cache completely and performing blocking revalidation

https://nextjs.org/docs/canary/app/api-reference/config/next-config-js/cacheLife