SSR And Client Rendering

The scheduling data model is framework-neutral, but the Gantt grid renders in the browser. Register custom elements, access document or window, and mount the grid only on the client.

Integration Rules

• Render a stable-height placeholder during SSR to avoid layout shift.
• Dynamically import the wrapper or Gantt component with SSR disabled.
• Call defineCustomElements() only in a browser entry or client lifecycle.
• Keep project data serializable across the server/client boundary.
• Do not create the grid during module evaluation in code that also runs on the server.
• Clean up listeners and element instances when client-side routes unmount.

if (typeof window !== 'undefined') {
  const { defineCustomElements } = await import('@revolist/revogrid/loader');
  defineCustomElements();
}

For React meta-frameworks, dynamically load the component client-side. For Vue/Nuxt use a client-only boundary. For Angular SSR, guard browser-only setup with the platform check used by your application.

The Vanilla quick start shows explicit mount and cleanup; the wrapper quick starts show property binding after hydration.