client-side-rendering.tsx

import * as React from "react";
import { Layout } from "../../components/Layout";
import { Result } from "../../components/Result";
import { useFlags } from "@happykit/flags/client";
import { AppFlags } from "../../types/AppFlags";

export default function Page() {
  const flagBag = useFlags<AppFlags>();

  return (
    <Layout
      title="Client-Side Rendering"
      source={`https://github.com/happykit/flags/blob/${process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF}/example/pages/demo/client-side-rendering.tsx`}
      flagBag={flagBag}
    >
      <article className="py-4 prose max-w-prose">
        <p>
          This demo shows how to use <code>@happykit/flags</code> for regular
          pages.
        </p>
        <p>
          In this configuration, the feature flags will be loaded when the
          client renders the page. They will not be loaded at build time. Check
          the Static Site Generation examples if you need that, or the
          Server-Side Rendering examples.
        </p>
        <p>
          When the page mounts, <code>@happykit/flags</code> will fetch the
          latest flags from the server and render the page accordingly.
        </p>
        <p>
          The <code>settled</code> value will then flip to true after the
          evaluation on the client finishes.
        </p>
        <Result key="static-site-generation-hybrid" value={flagBag} />
      </article>
    </Layout>
  );
}