What is the purpose and use case for router.isReady() ...

[michealroberts]

After taking a deeper dive into the documentation, it seems that although the router.isReady() API seems rather self-explanatory, I am still confused by why it could be used, but also where it should be used ...

Could anyone give me a router.isReady() 101 lesson, please 🙏

[posva]

From docs:

Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route. If the initial navigation already happened, the promise resolves immediately.

This is useful in server-side rendering to ensure consistent output on both the server and the client. Note that on server side, you need to manually push the initial location while on client side, the router automatically picks it up from the URL.

When the router is created it starts in a nowhere location. Depending on the environment (e.g. browser or not), it automatically picks up the location and internally runs router.push(). Until that first navigation isn't resolved, the current route is at the nowhere location (START_LOCATION). If you render your app on the server without waiting for the first navigation to be ready, it will render as if the application was nowhere, a blank page.