$ the-wire · showcase
Vue core fixes suspense hydration edge cases in stacked PRs
By RepoJournal · Filed · About Vue.js
Five stacked pull requests from serkodev fix long-standing Suspense and Transition hydration bugs in Vue core, preventing blank pages, crashes, and stale content during navigation.
A series of stacked pull requests from serkodev addresses multiple Suspense and Transition hydration failures in vuejs/core [1][2][3][4][5]. The changes ensure that leave hooks run for hydration placeholders, apply the latest transition hooks at teardown, and properly match node types. This prevents blank pages with `Transition mode="out-in"` and crashes on comment roots [1]. Additionally, interrupting hydration no longer leaks SSR DOM: components with pending `async setup()` or unsettled async loaders now get proper unmounting, avoiding crashes on null `subTree` and stale content [2]. Nested Suspense patches are no longer dropped during hydration, so navigation updates can be patched instead of resolving with stale SSR content [3]. The boundary is kept pending while its branch is patched, preventing double resolves [4], and hydrating pending branches are patched in place rather than in a `hiddenContainer`, avoiding `NotFoundError` and hidden nodes [5].
Action items
References
- [1] fix(hydration): run leave hooks for hydration placeholders ↗ vuejs/core
- [2] fix(suspense): unmount the DOM an interrupted async component claimed ↗ vuejs/core
- [3] fix(suspense): don't drop nested suspense patches during hydration ↗ vuejs/core
- [4] fix(suspense): keep the boundary pending while its branch is patched ↗ vuejs/core
- [5] fix(suspense): patch hydrating pending branches in place ↗ vuejs/core