Using Vue async components with SSR is causing rehydration on page refresh. Is there a way not to cause components update without reason? Markup from SSR and on client is the same.
Asked
Active
Viewed 1,437 times
1 Answers
0
When using dynamically loaded components recursively you have to add :key to each but that was not my problem. My problem lied in webpack loaded which could not handle two includes when in recursive mode. Ended up in circular dependency error. Even with loading method lazy.
Fixed by registering this component globally as a plugin (nuxt, but can be just loaded in app.vue with Vue.component. This way webpack does not try to load for the second and we can just use components that are already registered. Previous approach resulted resulted in rehydration of all recursive components on every page load.
Trouble
- 428
- 3
- 21
-
I do not understand clearly how you could achieve this... do you have some public example? Thanks – Luckylooke Jul 03 '19 at 12:57
-
1You can do it in a way that you do `
` and then you can have logic to import via webpack the component you need and use it + passing data – Trouble Jan 15 '20 at 13:22