vdux-server

Server-side rendering for vdux

Installation

$ npm install vdux-server

Usage

vdux-server takes three arguments and returns a promise that resolves to the rendered html of the page.

vdux(store, app, ready)

• store - The redux store that processes your actions. Should probably include virtex-string.
• app - Your app. Accepts state, returns a vdom tree.
• ready - Optional. Accepts state and returns a bool indicating whether or not the app is loaded. When this returns true, the promise returned by vdux-server will be resolved with the rendered html of the app.

Example - Sync

If you don't want to do any asynchronous rendering:

import koa from 'koa'
import app from './app'
import views from 'co-views'
import vdux from 'vdux-server'
import reducer from './reducer'
import configStore from './store'

const app = koa()
const render = views('views')

app.use(function *(next) {
  const initialState = {url: this.url}
  const store = configStore(reducer, initialState)

  const html = yield vdux(store, app)
  const state = store.getState()
  this.body = render('page.ejs', {html, state})
})

Example - Async

You might want to use this if you are loading pages for authenticated users, and want to pre-fetch and render as much data as you can before handing it off to the client's browser:

import koa from 'koa'
import app from './app'
import views from 'co-views'
import vdux from 'vdux-server'
import reducer from './reducer'
import configStore from './store'

const app = koa()
const render = views('views')

app.use(function *(next) {
  const initialState = {
    url: this.url,
    authToken: this.cookies.get('authToken')
  }
  const store = configStore(reducer, initialState)

  const html = yield vdux(store, app, state => state.loaded)
  const state = store.getState()
  this.body = render('page.ejs', {html, state})
})

License

MIT