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.
Related
I have an app that every time it reroutes, i get a loading state (ranging from 0.1 to sometimes 5 seconds!) and I don't know what to do about it.
The "loading state" is not related to fetching any data from api, but it indicates a page reroute? It is super annoying as a user.
Why does this happen? For example if you use twitter and reroute from /home to /explore, you change pages immediately (yes, you will have loading state, but only for explore page related data) and there is no lagging between page routes, but seamless transition.
Can someone help me please, i just want to call router.push('/somewhere') and render that page with no delay whatsoever.
why is this not happening right now?
is there something I can do about it?
I am trying to hard reload my react app onClick and I see a lot of comments on here saying
window.location.reload(); is the solution for this. However, there are a lot of conflicting reports on whether this causes the page to refresh from the cache or if it forces a pull from the server. Ive seen a lot of answers saying if you pass true into the reload action that forces the server fetch. But window.location.reload(); doesnt actually accept any arguments.
Can someone explain a method that works for forcing the page to pull from the server on reload? Or if window.location.reload(); will actually work for this?
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.
Google claims to be able to crawl SPAs. Since SPAs content is generated using javascript on the client-side, how does Google figure out if the page has finished rendering? For example, in a React app, a developer might do an AJAX call in the componentDidMount method, then update the state of the component when the data returns from the server. Is there a way Googlebot figures out when this has happened, or it just waits long enough for it to happen, then index the page?
Googlebot does not wait for the page to finish rendering. According to this article, the bot waits a window of time for the page to load, you can read it to learn more about SEO and single page apps. Since the article is from 2017 there may be changes, but I think it is a good starting point
Single page apps require careful management of events, DOM elements, and javascript objects in order to avoid leaks.
We're going to manage memory and squash leaks as best we can. That said, the application is large, uses many libraries, and could be left open for days at a time.
We need a safety valve.
I'm looking for ideas on how to unobtrusively trigger a page refresh in a single page app as a way to force the release of memory.
One idea is to detect when the user is idle for more than N minutes and do a refresh then, because it's unlikely to interrupt them. Much of the application state is saved in the URL using AngularJS ui-router, so this will work some of the time.
The problem is that while some state is in the router, not all of it will be. The user could have unsaved changes, or have some modal or flyout menu open which isn't in URL state. A solution could be to detect user changes and ban a refresh if any changes have taken place that aren't in the url. I don't see how to implement this generically though. Maybe we just put everything that's even a little bit important into URL state.
Another idea is to watch the application state change event $stateChangeStart and, every Nth time, do an actual browser navigation to that URL instead of just an app state change. This will never result in lost "sub-state", but will cause a slower page change response and a screen flicker. Maybe every 20 screen changes this is OK though.
Does anybody have any better ideas?
Just an idea on unsaved changes and data:
I have an a single page app that in one section has several tabs each containing a form. When each form becomes "dirty" it triggers a notification to the Main Controller, and sets a flag for that form. When a user saves a particular form the flag becomes unset. If the user tries to navigate away - before the route change occurs, it checks to see if any of the flags are set and then notifies the user via a modal that some particular information hasn't be saved. The user can then decide whether to continue with the route change or go back and save the data.
This could easily be modified to perform the same check on page refresh and if there is unsaved data either cancel the page refresh or save the changes to the browser's local storage for recall after the page has finished refreshing.