OVERMIND
v23.1
v23.1
  • Overmind
  • Introduction
  • Quickstart
  • How to learn
  • Videos
  • FAQ
  • Core
    • Devtools
    • Configuration
    • State
    • Actions
    • Effects
    • Operators
    • Statecharts
    • Server Side Rendering
    • Typescript
  • views
    • React
    • Angular
    • Vue
  • Addons
    • GraphQL
  • Guides
    • Connecting components
    • Connecting to React Native
    • Managing lists
    • State first routing
    • Move to Typescript
    • Testing
  • API
    • action
    • addFlushListener
    • addMutationListener
    • createOvermind
    • createOvermindMock
    • createOvermindSSR
    • derive
    • effects
    • events
    • json
    • lazy
    • merge
    • namespaced
    • onInitialize
    • operators
    • reaction
    • rehydrate
    • statecharts
Powered by GitBook
On this page
  1. API

createOvermindSSR

The createOvermindSSR factory creates an instance of Overmind which can be used on the server with server side rendering. It allows you to change state and extract the mutations performed, which can then be rehydrated on the client.

import { createOvermindSSR } from 'overmind'
import { config } from '../client/overmind'
import db from './db'

export default async (req, res) => {
  const overmind = createOvermindSSR(config)

  overmind.state.currentPage = 'posts'
  overmind.state.posts = await db.getPosts()

  const html = renderToString(
    // Whatever your view layer does to produce the HTML
  )

  res.send(`
<html>
  <body>
    <div id="app">${html}</div>
    <script>
      window.__OVERMIND_MUTATIONS = ${JSON.stringify(overmind.hydrate())}
    </script>
    <script src="/scripts/app.js"></script>
  </body>
</html>
`)
}

rehydrate

import { OnInitialize, rehydrate } from 'overmind'

export const onInitialize: OnInitialize = ({ state }) => {
  const mutations = window.__OVERMIND_MUTATIONS

  rehydrate(state, mutations)
}
PreviouscreateOvermindMockNextderive

Last updated 5 years ago