Forcing refresh of cached JS in SPA (reactJS) that changes between requests using react router

Active3 hr before
Viewed126 times

9 Answers


When you use react router, a route is loaded within the SPA when clicked (client side) without requesting any html or js from the back end because there is no need to. i.e. the loading is instant because it's meant to be an SPA. This makes sense because as I said, when the app is loaded the first time, app.[hash].js is downloaded and subsequently referenced.,I have come to the conclusion that my SPA using reactJS coupled with react router (react-router-dom 5, a client side routing service) CAN ONLY get a newly deployed javascript file IF IT is through a refresh. There is no other way. Am I wrong?, Are there any copyright laws within the "Star Trek" universe that prohibit certain things from being replicated without permission?

 Pretag team - issue, fix, solve, resolve

Force clear cache and hard reload when there's a version mismatch,When there is a version mismatch => force clear cache and hard reload When the versions are the same => Render the rest of the app,You can hard-reload when the app is idle

import packageJson from '{root-dir}/package.json';
global.appVersion = packageJson.version;
load more v

I understand that the random hash on the js and css files are to prevent caching issues, but what about the index file itself? What can I do to prevent this file from being cached?,This problem probably affects people who use routing (i.e. react router) or if you have a half/half react/non-react website and users need to click on a link to get into the react section.,if I want to force don't use service worker and cache must in my index.js add this ?

<?xml version="1.0" encoding="UTF-8"?>
            <clientCache cacheControlCustom="public"
                         cacheControlMode="UseMaxAge" />
                <rule name="Rewrite to index.html">
                    <match url="index.html|robots.txt|assets|static" />
                    <action type="None" />
                <rule name="Rewrite Index">
                    <match url=".*" />
                        <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html" negate="true" />

                    <action type="Rewrite" url="/" />

load more v

I settled on JHipster, a development platform for building web applications using modern technology: Angular, React or Vue for the client side, and Spring plus Gradle or Maven for the server side. It’s been around for years, is very well documented, and has great community support.,And that’s exactly what happened when building my first single-page app. I was so caught up in the short term excitement of learning a new technology, I never stopped to consider how that decision would impact the future of the app.,I want to pause here and clarify: JHipster and Angular are not bad platforms. Far from it. I’d recommend them in heartbeat for the right project.

 Pretag team - issue, fix, solve, resolve

Step #8 Now we can add the Routing part, and make some changes in the App.js, React Router: Routing Mechanism in ReactJS ,How Routing Works / Routing Mechanism

Step #1 Create a react App:

npx create - react - app my - app
load more v

Figure 1 In-memory caching allows some requests to benefit from faster response times.,Listing 1 shows how to add a simple caching module (abstracting this code makes it easier to update caching strategies to match your future needs). You should add this code to the new cache.es6 file in the shared directory.,Figure 4 When the edge has to cache pages per user, the benefit of overlapping requests is lost.

 Pretag team - issue, fix, solve, resolve

If the fetching of the data is relatively fast, can we build the page faster on the client side than waiting for the CDN dance to complete?,5. Server tells client the CDN is ready6. Client makes request to CDN7. Client replaces fallback with content from the CDN,This uploading step was taking longer and longer the more pages were statically built at deploy time. And then it all made sense. The initial ISR load time was slow because of this upload step!

Here is a basic reproduction of the code to render a page like this:

import { useRouter } from 'next/router'import { useEffect, useState } from 'react'export async function getStaticPaths() {    return { paths: [], fallback: true }}export async function getStaticProps({ params }) {    // Run your data fetching code here    const data = 'something cool'    return { props: { data }, revalidate: 30, }}export default function Page({ data }) {    const [clientData, setClientData] = useState(null)    const { isFallback } = useRouter()    useEffect(() => {       if (isFallback && !clientData) {           // Get Data from API           fetch('/api/getPageData').then(async resp => {               setClientData(await resp.json())           })       }     }, [clientData, isFallback])    if (isFallback || !data) return <RenderPage data={clientData} />    else return <RenderPage data={data} />}
load more v

When you use React, at a single point in time you can think of the render() function as creating a tree of React elements. On the next state or props update, that render() function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.,If you implement it naively, inserting an element at the beginning has worse performance. For example, converting between these two trees works poorly:,When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.

   <Counter />

   <Counter />
load more v

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.,Example: If you create pages/about.js that exports a React component like below, it will be accessible at /about.,Example: Your blog page might need to fetch the list of blog posts from a CMS (content management system).

 Pretag team - issue, fix, solve, resolve

Other "changes-forcing" queries related to "Forcing refresh of cached JS in SPA (reactJS) that changes between requests using react router"