route updates before suspense resolves

[danielroe]

Currently using useRoute (or $route) within a page means that some unexpected and counter-intuitive behaviours can occur when changing routes.

For example, content within a page that is dependent on the route can update before the new page swaps in, resulting in a strange flash of outdated data, or a network request that returns an invalid result (for example, when route.params.slug goes to undefined). This is more evident the longer it takes to resolve async setups, so when network speed is lower. In some cases that also mean that invalid data was getting cached within useAsyncData responses.

The issue is that <Suspense> creates two trees of vnodes, and needs to resolve the hidden tree before swapping it in. But it does not freeze reactivity on the route, so the 'visible' page reacts to the change of route before the new route page actually appears on the page.

Reproduction: https://stackblitz.com/edit/github-qwr9bd