Server-Side Rendering
Boneyard is built for the server. Unlike traditional libraries that measure the DOM at runtime, Boneyard pre-computes your layouts into static JSON. This allows your skeletons to render on the server, ensuring your users see a perfect loading state on the very first frame.
When the server renders a <Skeleton> component, it resolves the bones from your pre-generated registry. Because the server doesn't know the exact browser width, Boneyard defaults to the smallest captured breakpoint (mobile-first) by default.
Once the page hydrates in the browser, Boneyard immediately recalculates the responsive layout if the screen is wider, resulting in a smooth transition from mobile to desktop layouts.
Boneyard 5 natively supports Svelte's **Experimental Async** feature. By enabling this in your config, you can use the await keyword directly in your component markup or top-level scripts.
The AsyncSkeleton uses an internal <svelte:boundary> to catch these async calls. On the server, Boneyard renders your skeleton immediately, allowing the rest of the page to stream while the component's data is being fetched.
Traditional skeleton libraries require a browser environment to function. Boneyard works differently:
- Bones are pre-computed — Static JSON means the server knows exactly where to draw the bones.
- Zero Layout Shift — By using pixel-perfect snapshots, the skeleton takes up the exact space the real content will.
- Hydration Ready — The skeleton is part of the initial HTML, not injected later by JS.