Skip to content
Riot.js hydrate rendering for SSR applications
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md updated: documentation May 1, 2019
hydrate.js updated: improve the hydration fixing #1 May 4, 2019
package-lock.json updated: release bump May 30, 2019
package.json updated: release bump May 30, 2019
rollup.config.js added: documentation and improve source code May 1, 2019

README.md

@riotjs/hydrate

Build Status

NPM version NPM downloads MIT License

Installation

npm i -S riotjs @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.
@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 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:

<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>
You can’t perform that action at this time.