Next.js Discord

Discord Forum

has anyone else experienced this type of slow navigation?

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I click on a <Link> and it takes 5 seconds or so before the browser even shows the new page.

I'm using the pages directory and have confirmed that my js has been prefetched before clicking. basically zero time is being spent on the server, we're basically using next as a router for a SPA. i just am not certain how to figure out what is causiung that behavior. I've spent some time in the chrome performance profiler and im not positive what im looking for. The react profiler doesnt seem to show and renders that are taking multiple seconds.

12 Replies

West African LionOP
another odd thing I've learned is that when i wrap my pages like this: 
export default function Page() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1);

    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return <Loader />;
  }

  return <RealPage />
}
its nearly instant
i feel like that does point to it being something SSR related. I just want to understand whats actually causing it under the hood so i can make a better decision about how to fix it
@joulev Is this dev mode or prod mode? If this is prod mode, do you have getInitialProps or getServerSideProps in the destination page?
West African LionOP
ive been testing with prod builds just because i want to avoid on-demand compiling. no getIniitialProps or getServerSideProps at all. we're basically trying to client side render as much as we can
@West African Lion ive been testing with prod builds just because i want to avoid on-demand compiling. no getIniitialProps or getServerSideProps at all. we're basically trying to client side render as much as we can
joulev
hard to tell what's wrong here... is the page like extremely heavy, so heavy that it takes significant time for the browser to download the assets and render the page?
West African LionOP
so, kind of. The page itself isnt too huge in terms of DOM elements and we are doing some graph traversal inline - we have a weird home grown local first implementation that does block the render. The thing i cant make sense of is that when we
ah sorry- The thing i cant make sense of is that when we do the trick: 
if (loading) {
    return <Loader />;
  }

  return <RealPage />


then the paint truly doesnt happy 4 or 5 seconds faster, not just the navigation but the actual content on the page.

i would love to answer this with profiling, i just dont know exactly what im looking for
West African LionOP
I'm trying to see if i can make a minimal example but its proving to be sort of hard. i think its a little tied to some of the weird legacy stuff thats in the app
what i mean is if i navigate from page a to b, it takes 5 seconds for the route to change and for page B to show up on screen BUT if i wrap page B in this code (pasting below) the navigation and the rendering to browser happens nearly instantly. definitely under 1 second
export function DeferRender({ children }) {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    _.defer(() => setReady(true));
  }, []);

  if (!ready) {
    return null;
  }

  return <>{children}</>;
}
joulev
no clue, sorry. never seen a react component behaving like that before, the component must be having some pretty unmaintainable logic because this is not supposed to happen