Awesome
@riotjs/hydrate
Installation
npm i -S riot @riotjs/hydrate
Usage
If you are using @riotjs/ssr
you might prefer hydrating your server side rendered HTML enhancing your application user experience. Your users will get initially the static HTML (generated via @riotjs/ssr
) that will be enhanced only when javascript application will be loaded.<br/> @riotjs/hydrate
will allow you avoiding any perceivable application flickering or input fields focus loss when the javascript components will replace the static rendered markup.
A good practice is to mount your Riot.js components exactly with the same initial properties on the server as on the client.
import hydrate from '@riotjs/hydrate'
import MyComponent from './my-component.riot'
const hydrateWithMyComponent = hydrate(MyComponent)
// hydrate the SSR DOM contained in the #root element
hydrateWithMyComponent(
document.getElementById('root'),
window.__INITIAL_APPLICATION_PROPS__,
)
Callbacks
You can use the onBeforeHydrate
and onHydrated
callback in your components to setup your application internal state. Notice that these callbacks will be called only on the component hydrated and not on all its nested children components.
<my-component>
<script>
export default {
onBeforeHydrate() {
// do something before the hydration
},
onHydrated() {
// do something after the hydration
},
}
</script>
</my-component>
Caveats
The hydrate
method will mount your components on a clone of your target node not yet in the DOM. If your component state relies on DOM computations like getBoundingClientRect
and you don't want to use the onHydrated
callback, you will need to use a requestAnimationFrame
callback in your onMounted
method to wait that your root node has replaced completely the initial static markup for example:
<my-component>
<script>
export default {
onMounted() {
// your root node is not yet in the DOM
requestAnimationFrame(() => {
// your root is in the DOM
})
},
}
</script>
</my-component>