Bootstrap from your own server

You can "bootstrap" an SDK from your own server. If you use an SDK on your backend, you can pass the state of the SDK to the client, e.g. the browser, and then instantly initialize the SDK on the client with this state.

This is particularly useful for server-side rendering, e.g. with Next.js, as you can initialize the SDK and use your flags in the first app render on the client without any page load delay, UI flicker or layout shift.

You can get the state of the SDK on the server with hypertune.dehydrate() and pass it to the client:

import ClientExample from "./ClientExample";
import hypertune from "./hypertune";

export default async function ServerExample() {
  await hypertune.initIfNeeded();

  const rootNode = hypertune.root({ 
    args: {
      context: {
        user: { id: "test_id", name: "Test", email: "[e-mail]" },
      },
    },
  });

  const exampleFlag = rootNode.exampleFlag({ fallback: false });

  return (
    <>
      <div>Server Component flag: {String(exampleFlag)}</div>
      <ClientExample hypertuneDehydratedState={hypertune.dehydrate()} />
    </>
  );
}

Then you can initialize the SDK on the client with hypertune.hydrate(hypertuneDehydratedState):

"use client";

import { DehydratedState } from "../generated/hypertune";
import hypertune from "./hypertune";
import useHypertune from "./useHypertune";

export default function ClientExample({
  hypertuneDehydratedState,
}: {
  hypertuneDehydratedState?: DehydratedState | null;
}): React.ReactElement {
  if (hypertuneDehydratedState) {
    hypertune.hydrate(hypertuneDehydratedState);
  }

  const rootNode = useHypertune();

  const exampleFlag = rootNode.exampleFlag({ fallback: false });

  return <div>Client Component flag: {String(exampleFlag)}</div>;
}