Every time I update my website, the users need to do a Hard refresh to see the last changes
I search this issue but no result, tried added Tags in my Html file to avoid save cache in my app, the unregister function from the serviceWoker and the library of react-clean-cache but none seem to work
Is there a way to force Browser load my page from scratch ?
React v16.13.1
Node v13.13.0
You can use useHistory from react-router-dom. And then history.go(0) to force the refresh actual page.
Related
I am newbie to nextjs.
I have no idea why my website will reload periodically?
I know that hot code loading is the feature of nextjs.
Next.js reloads the page when it detects any change saved to disk.
However, How can I know what is the changes which cause the page reloading?
Fast refresh is triggered in development mode for a number of reasons like when an error is fixed, a file is updated, or Next detected out of date state. When stuff is out of sync Next will reload, this sometimes occurs between saves. The link as a complete list of reasons fast refresh is triggered and more detailed explanation.
You can also manually force a page to fast refresh which is helpful when working with code that is invoked on mount.
I have not seen a way to tell what triggered the fast refresh other than an obvious error that was fixed or when a file is updated and saved.
I have a menu with links to different pages, but when I click on the link to the page I'm already on, literally nothing happens. I want the page to rerender as if the user clicked in from another page.
I've tried
navigate('/temp')
navigate(link, { replace: true })
but it's not working.
The short answer is that you can't refresh the same page using #reach/router (from React, and Gatsby extends from it). This is because the location is the same so for the internal routing, nothing changes hence the refresh is not forced.
The easiest way to achieve it is by using the old-fashioned window.location.reload(). This will refresh the full page, forcing the components to be rendered again.
You can follow this GitHub thread for further information. As you can see, it can be achieved by diving into history.pushState and in other tricky ways but it always ends in a headache, it's not recommended since it's not the purpose of the #reach/router if it thrives will be with multiple caveats.
For standard internal navigation between pages, use <Link> component rather than navigate.
I am trying to prevent the situation where code is injected multiple times when revisiting a previously viewed Route.
In a conventional site, the page is reloaded, and thus all the tags and their content need to be downloaded again, but in React, using react-router-dom, the history is changed without a page refresh. This leaves the previously injected code on the page.
I'm trying to gauge if the logic for restricting when a tags content should be injected into the React app belongs in:
GTM Trigger
GTM Tag
I cannot find any documentation for achieving this in triggers (as tag firing options->once per page doesn't work in this case), but achieving it in the tag code could be as simple as checking for the existence of an id wrapping the tag code, and preventing injection if it is already present.
Any suggestions?
I am working on a React app, and within it there is a page with a lot of graphs and large list component, which takes some time to load (performance dependant). This is fine for now, but the issue comes from the following:
at the first render, there is an API call (App wide as different pages use the same data). A loading spinner shows while the API data is fetched
Once the data is fetched, it is Redux manages the state, and each component just takes what it needs from there (no more loading).
My issue is that when I navigate between pages trough links (react-router), after I click on the link it takes a while for the page to show and the menu to update the current page. None of the state data has changed in that timeframe, so I assumed a PureComponent would prevent re-render, but it doesn't work.
Is there any way to not re-render the page? I would expect to click on a link an immediately see the page that was already loaded before.
Sorry if the question is obvious, I got quite confused while researching this, with cold splitting, lazy loading, etc. which seems to be more about initial load vs. navigation?
If you have a large component dataset to mount and your state does not changes or affects re-renders you could prevent component from unmounting entirely.
If you are using react-router you can rely on setRouteLeaveHook.
If your unmount depends on conditional rendering, it is easier as you can hide your component in various way, including css display:none
There are several ways you can do this
The first one would be to not unmount the component, just hide it with CSS and display: none, but that's a shit solution if you ask me, since you'll still have the component in the DOM.
Another solution that you can use is the one that the guys from the Facebook team used when creating the official website for React. Once you hover over the link to the page, send a request to prefetch the data for that page. So, before the user even clicked, you will have the request already sent.
Another solution you can use is to cache the data. If you are not worried about users with older browsers waiting a bit for the component to load again. You can keep the data for the component in localStorage, then, when you are about to mount the component, check if the data is already in localStorage if it's there, just render the component, if not, just grab the data again.
A combination of the first and the second option would make your component pretty much always instantly render.
I have an issue with my app that I cannot find solution for anywhere. I use react-router-redux and syncHistoryWithStore.
When I click on my navigation to change a route using Link the new route loads, URL in the browser updates, however the location state doesn't update unless I click the Link two times.
UPDATE:
I've noticed it might have something to do with Chrome React DevTools. If I open the React Devtools and select provider then unwrap the components tree one at a time, the location state updates and everything works fine. However, if I use the search bar to locate the target component, location state doesn't work any more and the app breaks. Weird?!
Has anyone encountered a similar issue before? Any idea how to fix this?