Server-Side Rendering

Rendering happens client-side by default: the server emits an empty grid and items appear once the browser has measured them. Passing the ssr option instead lays the grid out on the server, so the first paint already carries positioned items.

estimateSize becomes required — the server has no DOM to measure, so it is the only height source. Without it every item collapses to 0.

With the component

Pass ssr alongside estimateSize:

import { Masonry } from 'kaskaid';
 
const HEIGHTS = [200, 600, 200, 400, 100, 100, 50, 200];
 
function App() {
  return (
    <Masonry
      data={HEIGHTS}
      ssr={{ itemCount: HEIGHTS.length, lanes: 4 }}
      estimateSize={(i) => HEIGHTS[i]}
      renderItem={({ item, index }) => <div style={{ height: item }}>{index}</div>}
    />
  );
}

With the hook

ssr is a plain useMasonry option, so a custom element structure gets the same server-rendered layout. Before mount, items holds the first ssr.itemCount entries from the measurements cache; after mount it becomes the real visible window.

import { useMasonry } from 'kaskaid';
 
const HEIGHTS = [200, 600, 200, 400, 100, 100, 50, 200];
 
function Grid() {
  const { gridProps, getItemProps, items } = useMasonry({
    data: HEIGHTS,
    ssr: { itemCount: HEIGHTS.length, lanes: 4 },
    estimateSize: (i) => HEIGHTS[i],
  });
 
  return (
    <section {...gridProps}>
      {items.map((item) => (
        <article key={item.key} {...getItemProps(item)}>
          <div style={{ height: HEIGHTS[item.index] }}>{item.index}</div>
        </article>
      ))}
    </section>
  );
}

Choosing the config

lanes (default 4) is the lane count used for the server layout and the first paint, before CSS resolves --lanes on the client. Pick the value your most common viewport lands on; see Styling & Responsive Lanes.

scrollMargin (default 0) is the pixel distance from the document top to the grid. The client measures this itself after mount, but the server cannot — so if anything renders above the grid (a header, a hero), pass its height here or the pre-rendered items will shift once the client corrects the offset.

Reference

• <Masonry /> › ssr — the full SSRConfig field table
• useMasonry › ssr