Static Rendering

It is sometimes desirable to render a component as static HTML, for example to render an application with some initial state while data is being fetched. This can be achieved using Plait's Static utility.

import { render } from 'plait/lib/Static'
import MyComponent from 'my-component'

const html = render(MyComponent)

By default, the component will be rendered with the state from its init function. It is also possible to modify a component's state before rendering it. This is done by passing an updater function to Static.render.

The updater is a function which takes the component's initial state and a callback. Once the updater has finished, it should call the callback with the updated state.

import { render } from 'plait/lib/Static'
import MyComponent from 'my-component'

const updater = (state, done) => {
  fetch('/api/items')
    .then(response => response.json())
    .then(data => {
      done(state.set('items', data.items))
    })
}

render(MyComponent, updater).then(html => {
  // Do something with the static HTML
})