SSR & hydration

Server-rendered apps need a placeholder that exists at HTML time — measurement only happens in the browser. AutoSkeleton.SSR is a fixed-dimension placeholder you can render from the server.

Next.js App Router

import { Suspense } from 'react';
import { AutoSkeleton } from '@kenildev007/skeleto';

export default function Page() {
  return (
    <Suspense fallback={<AutoSkeleton.SSR shape="card" count={3} />}>
      <UserList />
    </Suspense>
  );
}

Shapes

<AutoSkeleton.SSR shape="card"   count={3} />
<AutoSkeleton.SSR shape="row"    count={5} height={48} />
<AutoSkeleton.SSR shape="circle" count={1} width={64} />
<AutoSkeleton.SSR shape="rect"   count={1} height={120} />

Hydration without flash

Most "auto" libraries flash the real content for one frame during hydration because measurement happens after paint. We solve this in three steps:

1. SSR renders fixed-dimension skeleton markup directly.
2. On hydration, we keep the skeleton mounted while measuring children in a hidden subtree.
3. We swap to real content only after measurements commit.

Verified in Chromium with 6× CPU throttle. Zero flash.