Add a `ready: boolean` to `Router` returned by `useRouter`

Because of the way Next.js does initial render of the pages, and that the initial render on client-side and server-side has to be the same (see https://reactjs.org/docs/react-dom.html#hydrate ), sometimes when a page is rendered, its’ query (returned i.e. by useRouter() hook) will be empty, even though it actually has query params. After the initial render, soon after there will be another render in which the query will be then populated with proper query params. ( Example described also in i.e. https://github.com/zeit/next.js/issues/7880 )

My code relies on those query params very heavily and we need to know “are those the real current query params or not yet?”. (i.e. because if query params are missing or incorrect, we’d like to redirect the user to another page)

Describe the solution you’d like

I think that either:

• query should be always populated with the current query params (even on initial client-side hydration that happens after a server-side render)
• or, (IMO better), add a ready: boolean flag to Router, so the component can listen to this using i.e. useEffect and ignore the query params when they aren’t parsed yet.

Describe alternatives you’ve considered

I think we’ll have to go with some setTimeout or sth for now until a better solution is found.

[defx]

+1 for better documentation around static patterns.

[lifeiscontent]

@jtomaszewski would you ever want to use the router when it is not “ready”? I feel like next.js should only render a page once the router is ready, that way I don’t have to do a bunch of conditional logic around if query params are loaded or not.

like in this example:

https://github.com/lifeiscontent/realworld/blob/2feda02ec18d617b4806dad071d8a97908f52e0d/web/src/containers/index-page/index.js#L14-L25

to me, it’d be ideal if next would just wait for the params to be ready before rendering, that way I don’t need to conditionally check if they’re “ready” which seems like an implementation detail to me that shouldn’t be exposed to us as the users of next.js

What are your thoughts?