> ## Documentation Index
> Fetch the complete documentation index at: https://dnd-grid.blode.md/llms.txt
> Use this file to discover all available pages before exploring further.

# SSR

`dnd-grid` is safe to render on the server. `DndGrid` and `ResponsiveDndGrid`
measure their container width on the client, so use the patterns below to
avoid layout jumps and hydration warnings.

## Use a client component

`DndGrid` relies on DOM events and `ResizeObserver`. In Next.js App Router,
render it in a client component:

```tsx
"use client";

import { DndGrid } from "@dnd-grid/react";
```

## Auto width (default)

`DndGrid` and `ResponsiveDndGrid` wait for their first measurement by default.
If you want to render immediately, pass `measureBeforeMount={false}` and an
`initialWidth`.

```tsx
import { DndGrid } from "@dnd-grid/react";

return (
  <DndGrid
    {...props}
    measureBeforeMount={false}
    initialWidth={800}
  />
);
```

## Explicit width (known ahead of time)

If you already have a width (layout shells, SSR constraints), pass it directly:

```tsx
import { DndGrid } from "@dnd-grid/react";

return <DndGrid width={800} {...props} />;
```

## Keep styles global

Make sure the stylesheet is imported from a client entry or global CSS:

```tsx
import "@dnd-grid/react/styles.css";
```