Static Site Generation (Hybrid)

This demo shows how to use @happykit/flags for static pages.

This page is rendered statically at first. The first rendering pass will use no visitor key. This is necessary as the concept of a visitor does not exist during static site generation. Thus all rules and percentage-based rollouts targeting a visitor resolve to null. If provided, the fallback values will be used for those.

The client reuses the statically evaluated feature flags for the first rendering pass. Then it reevaluates the flag with the visitor information. Some flags might change as a result of this.

The settled value will then flip to true after the reevaluation on the client finishes.

Render #1 (Current render)
{
  flags: {
    ads: true,
    checkout: null,
    discount: 5,
    purchaseButtonLabel: null
  },
  data: {
    flags: {
      ads: true,
      checkout: null,
      discount: 5,
      purchaseButtonLabel: null
    },
    resolvedVariantIds: {
      ads: "on",
      checkout: null,
      discount: "on",
      purchaseButtonLabel: null
    },
    visitor: null
  },
  error: null,
  fetching: false,
  settled: false,
  visitorKey: null
}