Server rendering

Provide Temporal at startup

A server render cannot await anything mid-render, so Temporal has to be in place before the first call. In Next.js that is instrumentation.ts; anywhere else it is the entry point.

// instrumentation.ts (or server entry)
import 'temporal-polyfill/global'

export const register = async (): Promise<void> => {
  // Temporal is now available on globalThis for server rendering
}

Node 24 and modern runtimes already ship Temporal natively. On runtimes without native Temporal, importing temporal-polyfill/global provides globalThis.Temporal synchronously before any calendar calls are made.

What the server sends

A calendar is plain JSON, so everything the layout needs is computed on the server and rendered as markup: day headings, slot rows, bars and boxes, all positioned. Only two things are client-side by nature — Calendar.NowMarker, which reads the wall clock, and any scroll TimeGrid performs on mount.

Hydration

On browsers without native Temporal like Safari, import temporal-polyfill/global before hydration in your client entry module. Because Chronous reads globalThis.Temporal synchronously, having the polyfill in place ensures the calendar renders immediately on first paint without hydration mismatches. See Temporal & Safari.

// Application entry / hydration
import 'temporal-polyfill/global'
import { hydrateRoot } from 'react-dom/client'

import { Board } from './board'

const container = document.querySelector('#root')

if (container) hydrateRoot(container, <Board />)