Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build Status NPM version NPM downloads MIT License


npm i -S riotjs @riotjs/hydrate


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.
@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


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.

    export default {
      onBeforeHydrate() {
        // do something before the hydration
      onHydrated() {
        // do something after the hydration


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 get​Bounding​Client​Rect 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:

    export default {
      onMounted() {
        // your root node is not yet in the DOM
        requestAnimationFrame(() => {
          // your root is in the DOM