search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.19k stars 52 forks source link

Causes scroll jumps when going back and forward in browser #88

Open kedrzu opened 3 years ago

kedrzu commented 3 years ago

I use this library along with Nuxt and basic vue-router in SSR / static mode.

Reproduce steps:

  1. Render page. Everythings loads fine (statically), lazy hydration works perfectly.
  2. Scroll somewhere down.
  3. Go to some other page. This is standard SPA navigation to some other page using vue-router. Still works like charm.
  4. Click back in your browser.

And here's the deal: when going back, vue-router tries to scroll user to the same position he was before. But lazy-hydrate works basing on Promise now, and that causes a slight delay in component rendering. So at the time router scrolls down, components are not rendered yet. Effectively, you land on the bottom of the page (or in some other bad place).

The previous version (v1) worked differently, basing on some Virtual DOM hacks. The problem does not appear there.

maoberlehner commented 3 years ago

Thank you for your detailed issue report. Still, providing a reproduction app (CodeSandbox or GitHub repo) would make it easier for me to work on this, which will make it more likely that I'll work on this sooner.

kedrzu commented 3 years ago

I made a fix for the issue: https://github.com/maoberlehner/vue-lazy-hydration/pull/113 I use it in a production application and works like charm. Can you take a look?