routeChangeComplete event called on page load for routes with params

[anthonyshort]

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

[anthonyshort]

@timneutkens I can probably take a look into it myself if I can get pointed in the right direction.

[Yankovsky]

Same problem here.
routeChangeComplete event is called because this evaluates to true

next.js/packages/next/client/index.js

Line 103 in a0c6832

(hydrateProps && hydrateProps.__N_SSG && location.search))

Additional condition was probably firstly introduced here 45832e4
I don't know what hydrateProps.__N_SSG means, probably Not Static Site Generation?

[Yankovsky]

I've tried local development and static export and in both cases data.nextExport was false and __N_SSG was true.

[Yankovsky]

Similar problem #15082

[Yankovsky]

Maybe someone from core team can explain what was intended here.

[valse]

Hi, check it out this discussion #12306 about avoid double analytics views on page load

[valse]

However this is a big problem when you must trigger something on change routing only: I have this need and at the moment I can't find a workaround to skip the first "bad" routeChangeComplete trigger :(

[Yankovsky]

@valse that's great, but it is a workaround. It would be great to understand reasons behind the code and to fix root problem.

[ypresto]

Still exists in next v10.2.3

[mi-na-bot]

This issue exists on routeChangeStart as well with next 11.1.0 and makes the router hooks really difficult to use!

[tpreusse]

Have you considered listening to router.isReady?

See #11639 (comment)

Outdated Solution

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

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

[yousefcisco]

@tpreusse Thanks, that worked for me!

[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.

[and-poulsen]

Is there any news on this?

[mgr34]

Is there any news on this issue? And could I not just use useRef and update the ref.current property each time, and only track if ref.current !== url?

[tpreusse]

@yousefcisco watchout Next v12.2 changed the behaviour again: #37593 — in our case with middleware and incremental ssg pages we no longer got routeChangeComplete events for the initial page view.

New solution:

let lastTrackedPath
const track = path => {
  // avoid double tracking
  // - in case next router becomes ready and triggers a routeChangeComplete
  if (path === lastTrackedPath) {
    return
  }
  lastTrackedPath = path
  // call to analytics api
}

const Track = () => {
  useEffect(() => {
    if (router.isReady) {
      track(router.asPath)
    }
  }, [router.isReady])
  useEffect(() => {
    const onRouteChangeComplete = (asPath) => {
      track(asPath)
    }
    router.events.on('routeChangeComplete', onRouteChangeComplete)
    return () => {
      router.events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [])
  return null
}

// render <Track /> in _app.js

@shuding maybe it's a bug that routeChangeComplete is no longer triggered since v12.2 for SSG pages in some circumstances. To be safe and more feature proof we will now listen to isReady changes and routeChangeComplete and deduplicate with a custom check.

[deckgl5]

@tpreusse https://openjs.space/questions/how-to-update-router-query-in-next-js-without-triggering-a-page-change-event