Skip to main content

SSR deterministic scene

Seed a board with initial nodes for server-side rendering and hydration.

SSR only works if the server and client render the same scene. That means deterministic IDs, deterministic node order, and no random creation during setup.

ts
const engine = createBoardEngine({
  initialNodes: [
    {
      id: asNodeId('welcome'),
      type: 'text',
      x: 100,
      y: 100,
      width: 240,
      height: 160,
      text: 'Node',
      zIndex: 1,
      locked: false,
      visible: true,
    },
  ],
})

Use deterministic IDs

ts
id: asNodeId('welcome')

Seed the full node records up front

ts
initialNodes: [{ id, type, x, y, width, height, text, zIndex, locked, visible }]

Avoid random runtime creation during hydration

Do not call createNode() in a way that would diverge between server and client.

If the scene is bigger, build a deterministic JSON Canvas document once and import that document on both sides.