SSR + Navigation Guards + Async Route Components Can Lead to Unintended Behavior

[j0Shi82]

Version

3.4.4

Reproduction link

https://github.com/j0Shi82/vue-router-issue-3329

Steps to reproduce

• pull repo
• install nodejs
• run npm install or yarn install
• run npm run-script start or yarn run start
• navigate to http://localhost:8085/one

What is expected?

Shows http://localhost:8085/two

What is actually happening?

Server Error 500

---

This is a follow-up to #3329 with a working reproduction and a little more information about what is actually causing the issue.

I'm not sure this is a bug or just an edge case that you have to work around yourself. It's caused by combining SSR, async route components, and redirects within navigation guards. I tried dodging async routes on the server and only using them on the client bundle (to still get the benefit of code-splitting), but that led to hydration errors.

Possible workarounds are switching to static route components, avoiding redirects within navigation guards, or using the router.push api instead of next. In our own application we went for the third choice on the server, but had to add additional logic to prevent hydration errors and handle the history mode correctly.

Either way it might make sense to go over the official SSR guide to better communicate this issue.

[posva]

Thanks!