Handling Remix caching & new deployments: preventing mismatched versions?

[zwhitchcox]

I’m deploying a new Remix site, but some users are still running older cached assets. How do I avoid mismatched data/markup and potential breakage when the loader returns data that doesn’t match the old client code? Do I need to programmatically purge or invalidate the CDN when shipping a new build, or is there a better way to ensure everyone’s on the same version?

[sparkida]

@zwhitchcox are you deploying a static site? If so, then you'll most likely need to purge your CDN or you can define headers that will force it to revalidate the html files.

How do I avoid mismatched data/markup and potential breakage when the loader returns data that doesn’t match the old client code?

I'm assuming you mean in the scenario that a user is on the app during an update and their version is now broken. This is a general challenge in web development, not limited to Remix, and one solution is to poll an endpoint that returns your build version (this could be in your CDN as well, like version.txt) and if it doesn't match the last version you saw then you can inform the user and let them refresh when it's safe or just automatically refresh programmatically.

If you do have a backend on a SPA, loader data can become stale between route navigation, and to address this you can add a header to your route files to make sure loader data is always refreshed:

// app/_index.jsx

// force page refresh on navigation
export const headers = () => ({
  'Cache-Control': 'no-store',
});