Description
Version
3.4.4
Reproduction link
https://github.com/j0Shi82/vue-router-issue-3329
Steps to reproduce
- pull repo
- install nodejs
- run
npm installoryarn install - run
npm run-script startoryarn 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.