Disable "Tag" caches on Fetch (and other caches) in Development Mode

[mepadev]

Goals

1. Identify the environment: Detect if the code is running in development mode (using process.env.NODE_ENV)
2. Disable fetch cache: Configure fetch requests to disable caching in development mode
3. Disable other caches: Turn off other specific caches (like SWR or Next.js data fetching) when in development
4. Update global configuration: Apply global settings to ensure cache is disabled across the app during development
5. Test in local environment: Verify that caching is properly disabled in development mode

Non-Goals

1. Modifying production behavior: Do not change caching behavior for production builds, only for development mode.
2. Implementing custom caching logic: The goal is to disable caching, not to create a custom caching mechanism.
3. Optimizing cache performance: Since this is for development, performance optimization is not a focus.
4. Permanent removal of caching: Caching should only be disabled temporarily for development, not removed entirely.
5. Altering external libraries' caches: Avoid changing caching behavior for external libraries unless necessary for development purposes.

Background

Developers facing caching issues in Next.js use the following workarounds:

• - delete .next/cache: After every change, remove the cache folder and restart the server (rm -rf .next/cache && yarn dev)
• Modify next.config.js: Adjusting Webpack's managedPaths or watchOptions allows Next.js to track changes in certain modules

The problem is that caching in development can prevent realtime updates, especially with fetch. For instance, if the backend goes down, cached responses mask the issue, making it hard to debug. These aggressive caching behaviors during development lead to confusion when trying to test and fix issues.

Proposal

caching could be disabled through the next.config.js file

• add a disableCache option when process.env.NODE_ENV === 'development'.

module.exports = {
  disableCache: process.env.NODE_ENV === 'development',
  webpack: (config, { dev }) => {
    if (dev && config.disableCache) {
      config.cache = false;
    }
    return config;
  },
};

automatically set 'Cache-Control: no-store' in fetch requests during development