Server Components

This demo is easiest to understand if you open its source code in a parallel tab.

Source code

This demo shows how to use @happykit/flags for server components in Next.js App Router.

Since this page is rendered on the server only, there is no flagBag. Instead, the values are shown directly.

Flags
{
  flags: {
    ads: true,
    checkout: "short",
    discount: 5,
    purchaseButtonLabel: "Add to cart"
  },
  data: {
    flags: {
      ads: true,
      checkout: "short",
      discount: 5,
      purchaseButtonLabel: "Add to cart"
    },
    resolvedVariantIds: {
      ads: "on",
      checkout: "on",
      discount: "on",
      purchaseButtonLabel: "1617982706033"
    },
    visitor: {
      key: "gg18X_5m9QI9Su0HM0-ga"
    }
  },
  error: null,
  initialFlagState: {
    input: {
      endpoint: "https://happykit.dev/api/flags",
      envKey: "flags_pub_289861443285680649",
      requestBody: {
        visitorKey: "gg18X_5m9QI9Su0HM0-ga",
        user: null,
        traits: null
      }
    },
    outcome: {
      data: {
        flags: {
          ads: true,
          checkout: "short",
          discount: 5,
          purchaseButtonLabel: "Add to cart"
        },
        resolvedVariantIds: {
          ads: "on",
          checkout: "on",
          discount: "on",
          purchaseButtonLabel: "1617982706033"
        },
        visitor: {
          key: "gg18X_5m9QI9Su0HM0-ga"
        }
      }
    }
  }
}