https://github.com/riot/hydrate
Riot.js hydrate rendering for SSR applications
https://github.com/riot/hydrate
Last synced: 6 months ago
JSON representation
Riot.js hydrate rendering for SSR applications
- Host: GitHub
- URL: https://github.com/riot/hydrate
- Owner: riot
- License: mit
- Created: 2019-04-30T20:40:26.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T19:17:39.000Z (over 1 year ago)
- Last Synced: 2025-06-23T12:45:51.076Z (7 months ago)
- Language: JavaScript
- Size: 902 KB
- Stars: 16
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @riotjs/hydrate
[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
## Installation
```bash
npm i -S riot @riotjs/hydrate
```
## Usage
If you are using [`@riotjs/ssr`](https://github.com/riot/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.
```js
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.
```html
export default {
onBeforeHydrate() {
// do something before the hydration
},
onHydrated() {
// do something after the hydration
},
}
```
### 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:
```html
export default {
onMounted() {
// your root node is not yet in the DOM
requestAnimationFrame(() => {
// your root is in the DOM
})
},
}
```
[ci-image]: https://img.shields.io/github/actions/workflow/status/riot/hydrate/test.yml?style=flat-square
[ci-url]: https://github.com/riot/hydrate/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/hydrate.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/hydrate.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/hydrate