Users having old client assets after deploys - How to avoid disruptions

[high lily]

TL;DR User still has old client assets until he refreshes the app, I am using docker on a VM

I basically have the same issue as this reddit user in this thread: https://www.reddit.com/r/webdev/comments/1fpwss3/how_are_you_avoiding_disruption_for_users_when/

When I release a new version of my app (say a bug fix), users who are currently using the platform will not see the changes unless they refresh the remix web app or open it in a new tab.

That's a problem for me because many of my users lock their PCs and leave the app running in a browser tab on their work computer overnight and some didn't understand what I meant when I told them to refresh the app.

Even me, once was trying to debug a user's app for something I have solved and it didn't occur to me to refresh the app.

I believe this problem might not be specific to remix.

How do you deal with it?

My app is running on a docker container in a traditional VM, dockerfile in next message

That is the dockerfile I am using

# syntax=docker/dockerfile:1
# check=error=true

# This Dockerfile is designed for production, not development.

# Make sure NODE_VERSION and NPM_VERSION match the versions in the package.json
ARG NODE_VERSION=23
ARG NPM_VERSION=10.9.2

# base node image
FROM node:$NODE_VERSION-alpine3.19 AS base

# Install openssl
RUN apk update && apk add --no-cache openssl

# Install specific npm version
RUN npm install -g npm@$NPM_VERSION

# Install all node_modules, including dev dependencies
FROM base AS deps

RUN mkdir /app
WORKDIR /app

ADD package.json package-lock.json ./
RUN npm install --production=false

# Setup production node_modules
FROM base AS production-deps

ENV NODE_ENV="production"

RUN mkdir /app
WORKDIR /app

COPY --from=deps /app/node_modules /app/node_modules
ADD package.json package-lock.json ./
RUN npm prune --production

# Build the app
FROM base AS build

RUN mkdir /app
WORKDIR /app

COPY --from=deps /app/node_modules /app/node_modules

ADD . .
RUN npm run build

# Finally, build the production image with minimal footprint
FROM base

ENV NODE_ENV="production"

RUN mkdir /app
WORKDIR /app

COPY --from=production-deps /app/node_modules /app/node_modules
COPY --from=build /app/build /app/build
COPY --from=build /app/public /app/public
ADD . .

ENV PORT="80"
EXPOSE 80
CMD ["npm", "run", "start"]

[knotty jungle]

I'd recommend creating an API inside the remix app that returns the current version of the app (ideally the version field from package.json , which you would update anytime your pushing changes from the app to prod). Then you could either poll that API or listen for the pageshow event, and if there's a mismatch, prompt the user to refresh. Something like this for example if doing the interval route

const currentVersion = '1.0.0' // This should be dynamically set based on your app's version

function checkForUpdates() {
  // Endpoint that returns the current version of the app
  fetch('/api/version')
    .then((response) => response.json())
    .then((data) => {
      if (data.version !== currentVersion) {
        alert('Please refresh the page, a new version has been released.')
      }
    })
    .catch((error) => console.error('Error checking for updates:', error))
}

// Check for updates every 5 minutes
setInterval(checkForUpdates, 300000)