CODEWITHSUNDEEP
javascriptreactjscreate-react-app
Jasim Uddin
Jasim Uddin

Reputation: 189

Why it's need a hard reload when I update react app server

Every time when I update the app server with some changes then my app takes a hard reload. Otherwise, I can't see the changes.

From my perspective, It's a problem.

My users don't know when I update the server, and I can't tell my users that you need a hard reload.

Now how can I solve this problem?

Here is my dependencies:

"dependencies": {
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.58",
"@material-ui/styles": "^4.11.4",
"@sentry/react": "^6.2.0",
"@sentry/tracing": "^6.2.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"axios-hooks": "^2.1.0",
"bootstrap": "^4.5.0",
"bootstrap-daterangepicker": "^3.1.0",
"chart.js": "^2.9.3",
"chroma-js": "^2.1.0",
"date-fns": "^2.22.1",
"gh-pages": "^2.2.0",
"history": "^4.10.1",
"html-react-parser": "^0.13.0",
"i": "^0.3.6",
"i18next": "^19.5.1",
"i18next-browser-languagedetector": "^5.0.0",
"i18next-http-backend": "^1.0.15",
"i18next-xhr-backend": "^3.2.2",
"jwt-decode": "^3.0.0-beta.2",
"lodash.throttle": "^4.1.1",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-bootstrap-4-pagination": "^1.0.3",
"react-bootstrap-datetimerangepicker": "^2.0.4",
"react-chartjs-2": "^2.11.1",
"react-circular-progressbar": "^2.0.3",
"react-color": "^2.18.1",
"react-cookie-consent": "^6.2.3",
"react-date-range": "^1.2.0",
"react-datepicker": "^3.4.1",
"react-dom": "^16.13.1",
"react-flags-select": "^1.1.12",
"react-ga": "^3.3.0",
"react-google-login": "^5.2.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.3.1",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.7.0",
"react-moment": "^0.9.7",
"react-nested-loader": "^2.2.1",
"react-paginate": "^7.1.0",
"react-pro-sidebar": "^0.6.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "^3.4.3",
"react-scroll": "^1.7.16",
"react-select": "^3.1.0",
"react-select-country-list": "^2.2.1",
"react-tabs": "^3.1.1",
"reactcss": "^1.2.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"semantic-ui-react": "^0.88.2",
"styled-components": "^5.2.3",
"swiper": "^6.7.0",
"universal-cookie": "^4.0.3",
"use-dynamic-refs": "^1.0.0",
"validator": "^13.1.1"

},

Upvotes: 0

Views: 938

Answers (1)

Milind Sharma
Milind Sharma

Reputation: 111

In client side many JS chunks and assets are fetched from the server. To make the loading fast, caching is used on server as well as browser. When you restart your server there might be chance that old cache is still being used. It takes a hard refresh to remove the old cache if not being done automatically. You can change server caching time/strategy to fix this. Or use service worker on client side to manage chunks fast and better

Upvotes: 2

Related Questions