How to handle maintenance process with React

Here is my app’s current way to handle the maintenance process:

I have an environment variable for the app status:

REACT_APP_SITE_MODE=“LIVE” | “MAINTENANCE”

I'm using react-router for routing the app:

switch (process.env.REACT_APP_SITE_MODE) {
  case "MAINTENANCE":
    return (
      <Switch>
        <Route component={MaintenancePage} />
      </Switch>
    );
  default:
    return (
      <Switch>
        {/* Default routes */}
      </Switch>
    );
}

This works fine but when we just switch it to the maintenance mode, some users can still access the app with the default routes (this is not good when the backend is down), I think it’s because of the browser cache or something.

My question is:

1. How to prevent users from accessing the app during the maintenance period? (force them to clear their cache in that specific time?)
2. Is there a better way to handle the maintenance process?

Thanks.

I think your best bet is to have your maintenance state for both BE and FE:

• For BE, during the maintenance period, whenever having a request coming, it always returns a specific error code, which FE will understand.
• For FE, keep your implementation as it is right now, plus, add a middleware into your API request to detect whenever it has a response with the error code you defined, it will redirect back to your maintenance page.

So in the case of having a browser caching (your scenario), even though it can go to normal routes, the next time the FE sends a request to BE, it will be redirected to your maintenance page.