routeChangeComplete event is emitted for initial page load when fallback rewrite is enabled

[lafiosca]

Run next info (available from version 12.0.8 and up)

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.0.10
      react: 17.0.2
      react-dom: 17.0.2

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS Monterey 12.1

How are you deploying your application?

Vercel

Describe the Bug

In a fresh Next project, the router does not emit a routeChangeComplete event for the initial page load, as documented elsewhere:

    router.events.on('routeChangeComplete', onRouteChangeComplete);

But if you modify the next.config.js to include a fallback rewrite, the router DOES emit a routeChangeComplete event for the initial page load:

  rewrites: async () => ({
    fallback: [
      {
        source: '/:path*',
        destination: `http://localhost:4444/:path*`,
      },
    ],
  }),

This behavior is inconsistent and makes it difficult to know when to expect the "extra" initial event for analytics purposes.

Expected Behavior

I would like the router events to behave consistently and intuitively. Personally I would prefer if the initial page load always emitted the event, but ultimately I just want it to be consistent so we're not surprised by the behavior.

To Reproduce

I have created a fresh NextJS 12 TypeScript repo and modified it to demonstrate the behavior: https://github.com/lafiosca/nextjs-initial-route-example

The changes I made are simple: lafiosca/nextjs-initial-route-example@290e372

I configured a catch-all fallback rewrite to an arbitrary host, as described in the Incremental Adoption example here: https://nextjs.org/docs/migrating/incremental-adoption

And then I added a listener for routeChangeComplete in _app.tsx which outputs the url.

I ran the project in local dev mode, opened it in Chrome, and viewed the console:

If you comment out the single entry from the fallback config and restart the server:

You'll see a different behavior:

[balazsorban44]

routeChangeComplete event for the initial page load, as documented elsewhere

Could you link to this documentation please? 🙏 That event is supposed to be called when a page transition has completed.

Fires when a route changed completely

https://nextjs.org/docs/api-reference/next/router#routerevents

For the latter, the reason rewrites emits the event is because of the second render as explained here:
https://github.com/vercel/next.js/blob/canary/docs/advanced-features/automatic-static-optimization.md#how-it-works

(This is admittedly not in on our matching docs page as of writing, since it was recently clarified in #34049 but will be deployed 🔜)

Closing as this is expected.

[lafiosca]

routeChangeComplete event for the initial page load, as documented elsewhere

Could you link to this documentation please? 🙏 That event is supposed to be called when a page transition has completed.

By "documented elsewhere", I was referring to this issue: #4662

But to clarify, as I understand it: the expected behavior is for onRouteChangeComplete NOT to fire for the initial page load, as discussed in that thread. I was not attempting to suggest that documentation was wrong.

For the latter, the reason rewrites emits the event is because of the second render as explained here: https://github.com/vercel/next.js/blob/canary/docs/advanced-features/automatic-static-optimization.md#how-it-works

If I'm reading this correctly, the flow goes something like this:

• Client loads the page http://localhost:3333
• The initial route of path / is loaded with an empty query object, without firing the event
• The rewrite config causes the page to rehydrate with the query object
• The rehydration navigates to the same route path but now with the query object, which fires the route change events

If so, now I understand why it's behaving this way.

Closing as this is expected.

It may be expected, but is it intuitive or convenient for users of this software?

Some things I don't like about how it behaves right now:

• Not necessarily obvious to a new user who has not developed a deep understanding of the router and how Next config interacts with it
• No simple one-size-fits-all approach to handling page visit tracking (sometimes we have to explicitly grab the initial URL, sometimes we don't)
• No way for a custom component wrapping this logic to be agnostic to the Next config

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.