Query parameter in dynamic route is undefined on first render

[BernieSumption]

What version of Next.js are you using?

10.0.6-canary.7

What version of Node.js are you using?

14.15.4

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

When creating a dynamic route e.g. [part].js, and loading the page /foo, the page component is initially rendered with the route parameter set to undefined. It is then rendered again with the correct parameter.

Expected Behavior

The initial render should contain the URL parameter.

To Reproduce

With an empty app as created by create-next-app, add a file [part].js with the following content:

import React from "react";
import { useRouter } from "next/router";

export const Page = () => {
  const router = useRouter();
  console.log(router);
  return (
    <div>Hello!</div>
  );
};

export default Page;

Then load http://localhost:3000/foo. There will be two console log lines, undefined then "foo".

[jamesmosier]

You can use router.isReady to determine when the router.query value is available.

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

This behavior is expected, per these docs: https://nextjs.org/docs/routing/dynamic-routes#caveats

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

[BernieSumption]

The isReady property of router is documented but as far as I can tell doesn't actually exist on the router object.

1. Trying to use it in TypeScript gives a type error
2. console.log(router.isReady) gives undefined
3. grep -R isReady node_modules/next finds no files containing the string

[jamesmosier]

I see router.isReady is on Next 10.0.6-canary.7 (as well as 10.0.5) 🤔

[BernieSumption]

OK that's so strange, I just deleted my node_modules and reinstalled, and now isReady is appearing, and the same grep command finds it in the node_modules/next source. I can't even. Hooray for JavaScript! 🤷‍♂️✨

Thanks for your help.

[ivan-kleshnin]

Docs claim that router.isReady should "only be used in useEffect:

isReady: boolean - Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server.

I don't see why. The following code:

export default function Page() {
  const router = useRouter()
  if (!router.isReady) {
    return <div>Loading...</div>
  }
  ...
}

works normally and won't cause any SSR/hydration problem imo: router.isReady is false on the server and on the first render on the client.