routeChangeComplete event called on page load for routes with params

Describe the bug

When ASO is enabled and you navigate to pages with params the routeChangeComplete is called. On page load:

• router.query is {} on first load, but apparently that’s expected.
• routeChangeComplete is called.

This is a problem because routeChangeComplete isn’t called when loading pages that don’t have parameters. This inconsistency makes things difficult.

In my case I’m trying to call analytics events on route change and page load. The page view event is called on page load (using an effect) but then the routeChangeComplete is immediately called which fires the page view again.

To Reproduce

Reproduction example here

Steps to reproduce:

1. Start the server
2. Go to / and see that route change is NOT logged
3. Add any query param, e.g. /?id=1. Reload the page and notice route change is called
4. Go to /posts/1 and see that route change is logged on page load
5. Add getInitialProps to _app and this doesn’t happen any more

Expected behavior

I would expect either:

1. Route change is always called on page load while ASO is enabled.
2. Route change is not called on page load for pages with params

(I’d also not expect the query object to be empty, but that’s probably a separate issue)

Screenshots

N/A

System information

• OS: macOS
• Browser (if applies) Chrome
• Version of Next.js: 9.3.4

Additional context

N/A

[tpreusse]

Have you considered listening to router.isReady?

See https://github.com/vercel/next.js/issues/11639#issuecomment-1219654377

Outdated Solution

  useEffect(() => {
    if (router.isReady) {
      track()
    }

    const onRouteChangeComplete = (url, { shallow }) => {
      track()
    }
    router.events.on('routeChangeComplete', onRouteChangeComplete)
    return () => {
      router.events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [])

[barberdt]

Adding my recent experience here as well. After seeing wildly inaccurate “page view” events in our event tracking system I determined it was because of this same issue. Completely agnostic of query params, routeChangeComplete was firing on the initial page load for all of our SSG pages but not for our SSR pages. I too have now determined the above router.isReady to be the best workaround.

To echo what’s already been said here, the primary issue here is that, based on code and documentation, I still can’t tell what’s “expected” here vs. what may be a bug in the router. I guess my expectation would be that routeChange<anything> wouldn’t fire at all on initial page load for any type of page, but rather only once user interaction or my own code has triggered a history change.