Next.js SSR, step by step

Pass the server result as initialAssembly and initialIntent. The component renders that content in the server HTML, then re-classifies on the client in the background. If the client intent matches the server (same audience and stage), nothing changes. If it differs, it swaps the result in silently.

// app/page.tsx (Server Component)
import { PersonalisedSection } from '@spectare-personalisation/react';
import { getServerAssembly } from '@/lib/spectare';

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<Record<string, string>>;
}) {
  const sp = await searchParams;

  const ssr = await getServerAssembly({
    pageHint: 'Homepage',
    utmSource: sp.utm_source,
    utmMedium: sp.utm_medium,
    utmCampaign: sp.utm_campaign,
  });

  return (
    <main>
      <PersonalisedSection
        orgSlug="your-workspace-slug"
        pageHint="homepage"
        initialAssembly={ssr?.assembly}
        initialIntent={ssr?.intent}
      />
    </main>
  );
}

B. Zone-mapped rendering

Split the assembly into zones and drop each where it belongs. hero renders HeroStatement or ImageCtaHero, body renders the content components, proof renders TestimonialCard, cta renders CtaStrip. Pass the whole array to each spot; the renderer filters by zone.

// app/page.tsx: place each zone where it belongs in your layout
import { ComponentRenderer, PersonalisedSection } from '@spectare-personalisation/react';
import { getServerAssembly } from '@/lib/spectare';

export default async function Page({ searchParams }) {
  const sp = await searchParams;
  const ssr = await getServerAssembly({ pageHint: 'Homepage', utmSource: sp.utm_source });
  const assembly = ssr?.assembly ?? [];

  return (
    <main>
      {/* hero zone: HeroStatement or ImageCtaHero */}
      <header>
        {assembly.length
          ? <ComponentRenderer assembly={assembly} zone="hero" />
          : <PersonalisedSection orgSlug="your-workspace-slug" zone="hero" />}
      </header>

      <YourExistingContent />

      {/* body zone: AtomCard, StatGrid, FeatureList, CodeBlock, ComparisonTable */}
      <section>
        {assembly.length
          ? <ComponentRenderer assembly={assembly} zone="body" />
          : <PersonalisedSection orgSlug="your-workspace-slug" zone="body" />}
      </section>

      {/* cta zone: CtaStrip */}
      <footer>
        {assembly.length
          ? <ComponentRenderer assembly={assembly} zone="cta" />
          : <PersonalisedSection orgSlug="your-workspace-slug" zone="cta" />}
      </footer>
    </main>
  );
}

C. Map slots into your own markup

If you already have the HTML you want and just need personalised copy inside it, read slot values straight off the assembly array. Your existing copy is the fallback when no assembly arrives.

// app/page.tsx: drop personalised copy into your own markup, no wrapper components
import { getServerAssembly } from '@/lib/spectare';

export default async function Page({ searchParams }) {
  const sp = await searchParams;
  const ssr = await getServerAssembly({ pageHint: 'Homepage', utmSource: sp.utm_source });
  const assembly = ssr?.assembly ?? [];

  const hero = assembly.find(c => c.component === 'HeroStatement')?.slots ?? {};
  const cta  = assembly.find(c => c.component === 'CtaStrip')?.slots ?? {};
  const primary = cta.primary as { label: string; href: string } | undefined;

  return (
    <main>
      <h1 className="hero-headline">
        {(hero.headline as string) ?? 'Default headline'}
      </h1>
      <p className="hero-sub">
        {(hero.subheading as string) ?? 'Default description copy.'}
      </p>
      <a href={primary?.href ?? '/signup'} className="btn-primary">
        {primary?.label ?? 'Get started'}
      </a>
    </main>
  );
}