GHOSTFRAMES

SSR & Static Blueprints

Generate a blueprint before hydration, then hand the runtime a precomputed structure for the first paint.

Server-generated blueprint

Serialize the loading structure on the server or at build time and reuse it across requests

Nodes: 1

Static product card

Build once, reuse everywhere

SSR-ready

The same tree can be serialized on the server, cached at the edge, and handed to the client without waiting for a measurement pass.

Generated from static markup

Blueprint summary

Source

static

Nodes

1

Mode

flow

  • Useful for SSR and SSG when the loading structure is stable.
  • Pairs well with cache headers and edge reuse.
  • Removes the first client measurement pass from the critical path.

Precomputed blueprint handoff

The runtime receives the blueprint directly and uses the fast path immediately

Fast path

Loading state

Toggle the fast path skeleton on and off

Blueprint source

static

Measured on client

0

Render mode

flow

Because the blueprint is already hydrated, the runtime skips the expensive measurement step and can render the loading state immediately.

Integration example

Minimal server-side usage pattern for real apps

tsx
import { generateStaticBlueprint } from "@ghostframes/runtime";
import { AutoSkeleton } from "@ghostframes/runtime";

const blueprint = generateStaticBlueprint(
  <article>
    <h3>Build once, reuse everywhere</h3>
    <p>Serialize the loading structure on the server.</p>
  </article>
);

export function ProductPreview({ loading }: { loading: boolean }) {
  return (
    <AutoSkeleton loading={loading} blueprint={blueprint}>
      <ProductCard />
    </AutoSkeleton>
  );
}

Recommended Next.js pipeline

Validate server blueprints, apply cache guards, and defer costly remeasurements

  • Send `hydrateBlueprint` from server output and set `blueprintSource="server"`.
  • Use `blueprintCachePolicy` to enforce schema versions and expiry.
  • Choose `measurementPolicy` per section priority (`eager`, `idle`, `viewport`, `manual`).
  • Handle `onBlueprintInvalidated` to track drift and fallback behavior.
tsx
// server.tsx (RSC)
import { generateStaticBlueprint } from "@ghostframes/runtime";

const blueprint = generateStaticBlueprint(
  <article>
    <h3>Build once, reuse everywhere</h3>
    <p>Serialize loading structure on the server.</p>
  </article>
);

// client.tsx
import { AutoSkeleton } from "@ghostframes/runtime";

<AutoSkeleton
  loading={loading}
  hydrateBlueprint={blueprint}
  blueprintSource="server"
  blueprintCachePolicy={{ version: 1, ttlMs: 5 * 60_000 }}
  measurementPolicy={{ mode: "idle", budgetMs: 12 }}
  onBlueprintInvalidated={(reason) => console.warn(reason)}
>
  <ProductCard />
</AutoSkeleton>;