Next.js: Page transition delay

[kunokdev]

While navigating from one page to other, sometimes there is delay (sometimes even more than 2 seconds!)
I understand pages are server rendered but this is local host and I only have two pages. One is root and doesn't take any params. Other page has only one param. Root page has only 1 component (container) and is heavily lightweight. When I press on header logo which is link to /, sometimes delay goes up to 3 seconds which is unacceptable, and user can't even see that any loading is being done. I am already using prefetch attribute.

Is there a way to detect that a page is about to be loaded and show some GUI loader for that case? Are there some other optimizations that I have to take care of? Does this appear in production build?

[fionawhim]

You're probably seeing a delay due to Next.js’s on-demand compilation in development.

I've used NProgress to show a progress loader based on listening to Router events. See: https://github.com/CityOfBoston/registry-certs/blob/develop/client/RouterListener.js

Note that currently the Next Router can only have a single listener per event, so make sure that you only set one set of listeners in your code.

[kunokdev]

@finneganh Thank you very much.

So this is as expected, due to development mode. These are very good news. I kinda have issues finding explanations to some cases in Next.js due to lack of docs. (I don't say that current docs are bad, they aren't just detailed enough to explain all cases).

I didn't know about the listener and never used any middleware as suggested, can you please tell me more about it?

[fionawhim]

I've taken the pattern of wrapping all my Page components in a common higher-order component to do consistent client-side initialization, regardless of which page is loaded by the browser first.

You can see here: https://github.com/CityOfBoston/registry-certs/blob/develop/client/page.js

where I attach the RouterListener based on whether browserInited is set.

That page HOC wraps my components like this: https://github.com/CityOfBoston/registry-certs/blob/develop/pages/death/index.js