Stop reloading between page transitions. Improve perceived page speed. #560
-
What is the best way to increase the perceived speed when transitioning between pages that use SWR? I have a side menu which appears on every page:
Inside the side menu there's an useSWR for getting user info like "Your Lists". The problem that I have now, when I started using SWR on all components that have user info in them (including side menu) is that they always have the loading state on refresh or page transition, i.e. the Before starting to use SWR, the side menu would be connected to redux and it would get the user info from there, so it would look instant because the data would already be there, and page transitions would not change how side menu looks at all. I tried setting the fetcher for SWR to get profile info from localStorage so it would not have to wait for API response each time, but this would still show the loading state for a second, until actual read from localStorage happens, so it would not look instant. Using What I have discovered with SWR, is that transition between feed page and settings page (which is plain text) doesn't trigger the reload in the side menu, so no loading state appears and it looks as if just the page content changes. But transitioning from feed to article page and back does trigger the loading state from SWR and this is where the problem comes from. A good example to show this behaviour is the real world example here, after logging in you can test the following steps:
What's the difference between an Article Page and a Profile Page, because the latter causes a reload on going back home? Going through the code they both use getInitialProps that passes initialData to SWR (here and here) but they still trigger different behaviours. In my case there's no need for user data fetching on server side, so I don't have to use getInitialProps to pass initialData, but still, the problem is how SWR gets triggered between different page transitions. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
Without seeing the code it’s a little hard to be 100% sure hit from what you wrote I understood you are not doing client-side transition to move from lithe feed to the article right? Instead you are reloading. If you reload the internal cache of SWR will be reseted and it will need to fetch again the data. What I usually do to avoid this is to update the cache directly from localStorage instead of doing it inside the fetcher, this way SWR will give the the cached data immediately, I built a library (https://github.com/sergiodxa/swr-sync-storage) for this use case, you check the code to see how to do it. Another things is that you may want to solve the server-side transition when moving from feed to article, check if the href and as props in your Link components are correct, href must be the path of the page file inside your pages directory and as must be the URL the user see with the parameters replaced with the correct values. |
Beta Was this translation helpful? Give feedback.
Without seeing the code it’s a little hard to be 100% sure hit from what you wrote I understood you are not doing client-side transition to move from lithe feed to the article right? Instead you are reloading. If you reload the internal cache of SWR will be reseted and it will need to fetch again the data.
What I usually do to avoid this is to update the cache directly from localStorage instead of doing it inside the fetcher, this way SWR will give the the cached data immediately, I built a library (https://github.com/sergiodxa/swr-sync-storage) for this use case, you check the code to see how to do it.
Another things is that you may want to solve the server-side transition when moving fr…