React SSR app is not loading routed component in mid of API request

Question

I'm creating a React SSR Project. I have achieved server-side rendering with Redux integrated. However When I go through some component using api with bulk data, then while it's loading, hit the Back button of browser, my route changes immediately, the data of that component is loaded but it is not displayed until the current component gets its data and renders it.

So Is there any way to stop the async node server-side calling the data, as soon as the url changes, even if that async data hasn't come yet? I am using axios for now.

This is my server render:

export default function serverRenderer({ clientStats, serverStats }) {
  return (req, res, next) => {
    const context = {};
    const pageContainer = req.pageContainer || {};
    const PAGE = pageContainers.default[pageContainer];
    if (!PAGE || typeof (PAGE.fetchData) !== 'function') {
      const markup = ReactDOMServer.renderToString(
        <Provider store={store}>
          <StaticRouter location={req.url} context={context}>
            <RouteComp />
          </StaticRouter>
        </Provider>,
      );
      const helmet = Helmet.renderStatic();
      return res.status(200).send(Template({
        markup,
        helmet,
        state: store.getState(),
      }));
    }
    return PAGE.fetchData(store, req.urlparams).then(() => {
      const markup = ReactDOMServer.renderToString(
        <Provider store={store}>
          <StaticRouter location={req.url} context={context}>
            <RouteComp />
          </StaticRouter>
        </Provider>,
      );
      const helmet = Helmet.renderStatic();
      res.status(200).send(Template({
        markup,
        helmet,
        state: store.getState(),
      }));
    }).catch((e) => {
      console.log('fetch data error:::', e);
    });
  };
}

This is client.js

// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__PRELOADED_STATE__;

// Allow the passed state to be garbage-collected
delete window.__PRELOADED_STATE__;

// Create Redux store with initial state
const store = createStore(reducer, preloadedState, applyMiddleware(thunk));

hydrate(
  <Provider store={store}>
    <BrowserRouter>
      <RouteComp />
    </BrowserRouter>
  </Provider>,
  document.getElementById('app'),
);

This is a container which would have a static method for fetching data. The server calls fetchData of the matched Container

class HomeContainer extends Component {
  static fetchData(store) {
    const promises = [
      store.dispatch(fetchHomePageStarted()),
      getHomePageData()
        .then((response) => {
          const { data } = response;
          return store.dispatch(fetchHomePageSuccess(data));
        })
        .catch((error) => {
          console.log('error occurred -> ', error);
          return store.dispatch(fetchHomePageFailed(error));
        }),
    ];
    return Promise.all(promises);
  }
}