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?
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.
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
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'm aware that there's componentDidMount that's called when the component is mounted, however in the case of React's Navigator it does not Unmount the root components when you move to another page. So, for example, if you wanted to refresh information when a page was loaded. How would you go about that?
For example, I'm on a News page and I tap to go to a article. I stay on the article for 15 minutes or so, during this time, new News was added. When I hit the back button and pop the current view, it pulls up the old view. (Does not remount it) How would I go about setting a trigger to reload the data.
I have some ideas for hacks, but want to know if there's a proper way to do it.
The way I've been doing it is by creating a method that would refresh the information in News, then passing it to the next scene and calling it right before the navigator.pop().
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.