Skip to content
RevoGrid [Pro]

Server-Side Rendering (SSR)

Live example

Section titled “Live example”

This page is rendered by Astro and mounts the Vue grid through a client-only boundary. Expand the source preview to inspect the framework component; the wrapper code below shows the SSR boundary.

Source code
src/components/gantt/GanttBasic.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/gantt';
import { currentTheme } from '../composables/useRandomData';
import { calendars, dependencies, ganttConfig, initiallyHiddenColumnProps, tasks, taskTableColumnProps } from './gantt-basic-data';
import './gantt-basic.css';


const { isDark } = currentTheme();
const columns = taskTableColumnProps.map((prop) => createDefaultTaskTableColumn(prop));


export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) {
    return () => {};
  }


  const root = document.createElement('section');
  const grid = document.createElement('revo-grid');


  root.className = 'gantt-basic-demo';
  grid.className = 'gantt-basic-grid';
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  grid.canMoveColumns = true;
  grid.plugins = [GanttPlugin];
  grid.gantt = ganttConfig;
  grid.ganttCalendars = calendars;
  grid.ganttDependencies = dependencies;
  grid.columns = columns;
  grid.hideColumns = [...initiallyHiddenColumnProps];


  root.appendChild(grid);
  parent.appendChild(root);


  grid.source = tasks.map((task) => ({ ...task }));


  return () => root.remove();
}

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

Section titled “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.

---
import GanttBasic from '@revolist/revogrid-examples/components/gantt/GanttBasic.vue';
---
<div style="height: 600px">
  <GanttBasic client:only="vue" />
</div>

Copy the component into your own application; the private workspace examples package is used only by this documentation site.