Prevent caching of frequently changing GeoJSON polygons in a Mapbox project.

Caching resources used to make up online maps - tilesets, JavaScript, GeoJSON features, etc. - is usually a good idea for your users’ day-to-day experience. However, if the tool you are creating is used to create and edit features on a map such as points of interest and polygons, then caching works against you. The expectation and requirements are for real-time changes to be shown on the map straight away. They will be. But if you leave the editing page and return shortly after, you may be presented with the old version of the map even though all your changes are safely stored in your database or GeoJSON file.

The answer? Cache the GeoJSON on the front-end for your general users, but don’t cache the file for your users that make changes to the map. Add ‘Cache-Control’: ‘no-cache’, when fetching the GeoJSON file to ensure that you get the latest map features when ever you visit the map editor page.

const response = await fetch(`${geoJSONFile}`, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',
    }
});