React SPA edge caching problem

Hello Everyone,

I have a website based on a React app. As is the usual case with React SPA, there is a single .html file that references several React script bundles via <script> tags. The app won’t render until the .html file and all the bundles have been loaded. Therefore if even one file is not cached then the rendering is delayed due to the need to fetch the file from my origin server.

I have set Cache Level: Cache Everything, Edge Cache TTL: 7 days. If I disable client-side caching in the browser and point it to my site twice a day (e.g. in the morning and in the evening), then the site can almost never be observed to load fully from the edge cache due to not all files being cached. What happens is that some files (the .html file and/or script bundles) are cached and some are not in a seemingly random fashion. If the 12 hours interval is shorten to 5 min then the problem disappears with all the files being consistently cached by the edge servers.

On the Free Plan the requests can be handled by different CF datacenters. That’s fine and I expect the files to be either all HIT or all MISS for any website visit. There could be some exceptions to that from time to time because any file or files could be evicted from the cache for whatever reason (server needs to be rebooted etc). But at most times it should be either all or none, otherwise the 7 days Edge TTL setting becomes not meaningful.

However in practice the files are nearly always cached on the edge randomly for 12 hours intervals between website visits and consistently for 5 min intervals. Looks like the 7 days setting is not honored.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.