Feature request: allow restore state after app mounted while SSR
See original GitHub issueWhen we doing SSR following this guide: https://ssr.vuejs.org/guide/hydration.html
We want to restore the state after app.$mount('#app', true)
, otherwise the state at local storage would lead different DOM render between server and client.
This is because the state has been restored immediately when Vuex store created in plugins lifecycle, but the DOM rendered from server wouldn’t have these state, while app trying to mount, it cause error.
A proposal that we can have a ssrMode
option pair with an action to trigger the restore:
const vuexPersist = new VuexPersistence<any, any>({
ssrMode: true,
})
app.$mount('#app', true)
// restore state from persistence
store.dispatch('RESTORE_ACTION')
Issue Analytics
- State:
- Created 5 years ago
- Reactions:9
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Server-Side Rendering (SSR) - Vue.js
When Vue encounters a hydration mismatch, it will attempt to automatically recover and adjust the pre-rendered DOM to match the client-side state. This...
Read more >Using Non-SSR Friendly Components with Next.js
This way <Home/> component will only be rendered on the client after it has been mounted. It will not render while server-side rendered...
Read more >React useEffect causing: Can't perform a React state update ...
If the component updates it's state after it has been unmounted from the DOM, this is an indication that there could be a...
Read more >Creating Server-side Rendered Vue.js Apps Using Nuxt.js
When using a JavaScript framework, your browser doesn't receive a ... However, Nuxt offers Vue-specific features to create a powerful yet flexible SSR...
Read more >Complex Vue 3 state management made easy with Pinia
Build a basic blog engine using Pinia, a state management tool for Vue apps, and its main features, including state, getters, and actions....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I am also curious about an update, thank you!
this looks like a great proposal!
will try to implement this next week, till then if anyone can beat me to this with a PR then welcome!