Server Side Rendering (SSR)

Graphite Grid is designed for client-side rendering but can still be integrated with server-side frameworks.

Graphite Grid adjusts DOM elements' attributes and properties based on the browser environment, which is essential for its functionality. Most server-side frameworks allow rendering a component exclusively on the client. Below are some general guidelines for integrating Graphite Grid with popular frameworks.

Next.js

In Next.js, the dynamic function enables a component to be rendered client-side only. For example:

import dynamic from "next/dynamic";
 
const GGCanvas = dynamic(
  () => import("@1771technologies/graphite-grid-react").then((v) => v.GraphiteGridCanvas),
  { ssr: false },
) as <T>(p: GraphiteGridProps<T>) => React.ReactNode;
 
const GGDom = dynamic(
  () => import("@1771technologies/graphite-grid-react").then((v) => v.GraphiteGridDom),
  { ssr: false },
) as <T>(p: GraphiteGridProps<T>) => React.ReactNode;

This approach ensures that the Graphite Grid components, GGCanvas and GGDom, are only rendered on the client side, bypassing server-side rendering issues.

Remix

In Remix, the ClientOnly component from remix-utils is used to render components exclusively on the client side:

import { ClientOnly } from "remix-utils";
import { useGraphiteGrid, GraphiteGridDom } from "@1771technologies/graphite-grid-react";
 
function Grid() {
  const state = useGraphiteGrid();
 
  return <GraphiteGridDom state={state} />;
}
 
function App() {
  return <ClientOnly>{() => <Grid />}</ClientOnly>;
}

In this setup, the ClientOnly wrapper ensures that the Grid component, which uses Graphite Grid, is rendered only in the client's browser. This approach helps avoid rendering issues during server-side rendering.

These patterns provide a clear path for integrating Graphite Grid into server-rendered applications, ensuring that its dynamic, interactive features are preserved when used within client-side contexts.