search

ara-framework / hypernova-vue

Vue.js bindings for Hypernova.
https://www.npmjs.com/package/hypernova-vue
MIT License
41 stars 8 forks source link

Server / Client APIs don't match #8

Open 0xradical opened 4 years ago

0xradical commented 4 years ago

Hi Felipe! Nice lib!

I'm trying to understand why in clientside's renderVuex (defined on https://github.com/ara-framework/hypernova-vue/blob/master/src/index.ts#L100), you expect propsData to be encapsulated by a data key, but then on the serverside's renderVuex (https://github.com/ara-framework/hypernova-vue/blob/master/src/server.ts#L39) there's no such expectation.

Am I missing something ?

Thank you!

0xradical commented 4 years ago

On https://github.com/airbnb/hypernova-react/blob/master/src/index.js, parameters data and props (client & server, respectively) are basically the same thing.

marconi1992 commented 4 years ago

The renderVue works in the same way as renderReact. However, for renderVuex we need to save somewhere the Vuex store's state when the server-side rendered view is serialized in order to hydrate it on the client-side.

https://github.com/ara-framework/hypernova-vue/blob/master/src/server.ts#L55

This why we need to get the component's props from the propsData key and use state to hydrate the data for the store.

We plan to use another script tag to place the store's state when we're serializing the view, to avoid this workaround.