Server-side rendering

The SDK works on the server too. Fetch bundle data in a loader with KitenzoClient, then hand it to useBundle as initialData so the client doesn’t refetch.

Remix / Hydrogen loader

import { KitenzoClient } from '@kitenzo/react';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunctionArgs } from '@shopify/remix-oxygen';

export async function loader({ params, context }: LoaderFunctionArgs) {
  const client = new KitenzoClient({
    apiKey: context.env.KITENZO_API_KEY, // server-only env var, no VITE_ prefix
  });
  const bundle = await client.getBundle(Number(params.id));
  return { bundle };
}

export default function BundlePage() {
  const { bundle } = useLoaderData<typeof loader>();
  return <CustomBundle initialData={bundle} bundleId={bundle.id} />;
}

Hydrate on the client

Pass the server data to useBundle via initialData to skip the initial client fetch:

import { useBundle, useBundleBuilder } from '@kitenzo/react';

function CustomBundle({ bundleId, initialData }) {
  const { bundle } = useBundle(bundleId, { initialData });
  const builder = useBundleBuilder(bundle);
  // render your UI…
}

Environment variables

Context	Variable	Notes
Client (Vite/Hydrogen)	`VITE_KITENZO_API_KEY`	Vite exposes only `VITE_`-prefixed vars to the browser. Scope the key with allowed origins.
Server (Remix loader)	`context.env.KITENZO_API_KEY`	Server-only, no prefix. Preferred — the key never reaches the browser.