Stop reloading between page transitions. Improve perceived page speed.

[vladfulgeanu]

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:

• feed page, list of articles.
• article page, statically generated page (with getStaticProps).
• settings page, no SSG or SSR is used here, just plain text about the current user settings.

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 !data && !error check, so I end up displaying the old <div>Loading...</div> on every page change.

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 initialData inside SWR and getting it from localStorage doesn't solve the issue either because again, there's still a flash second to read localStorage and in addition, there's no official way of synchronizing the localStorage on every mutate().

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:

• on first feed (Home) load the Popular Tags from the right side load, which is ok as it's the first time.
• going to Settings page and back Home, does not reload the Popular Tags.
• going on an Article Page and then back Home, does not reload the Popular Tags.
• going on your profile (from navbar) and then back Home, does reload the Popular Tags.

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.

[sergiodxa]

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.

[lukebarton]

As @sergiodxa says, it definitely sounds like you're doing a full page load somewhere which is killing your in-memory state. Don't reach for local storage until you've solved that. useSWR doesn't really know what page you're viewing. As long as your navigation is internal as an SPA, then you should be be able to use existing useSWR cached data

[lukebarton]

I've had a closer look. My browser is definitely doing a full page load when navigating to the profile page.

[vladfulgeanu]

Seems that it was a problem of not setting the as property of Next Links properly. For the case of the Real World Example the link that does trigger a full page reload has an as property that depends on an useSWR hook:

  const { data: currentUser } = useSWR("user", storage);

  <NavLink
    href={`/profile/${currentUser?.username}`}
    as={`/profile/${currentUser?.username}`}
  >
  </NavLink>