Server-Side Rendering

Boneyard is inherently SSR-friendly. The CLI pre-computes your skeleton layout at build time into .bones.json files — so the skeleton is ready to render on the very first frame. No runtime DOM measurement, no layout shift, no waiting for JavaScript to hydrate.

How it works

Pass a fixture snippet with representative placeholder data to your <Skeleton>. At build time, the CLI renders this fixture, snapshots the real DOM layout, and writes the exact pixel positions to a .bones.json file.

Example
Why boneyard is SSR-friendly

Most skeleton libraries measure the DOM at runtime — which means the skeleton can't render until JavaScript loads and hydrates. Boneyard works differently:

  • Bones are pre-computed at build time — the CLI snapshots your real layout and saves it as static JSON
  • No runtime DOM measurement — <Skeleton> reads from the JSON, not from browser APIs
  • Same API everywhere — works identically across SSR, SSG, and SPAs