Server Side Rendering (Hybrid)

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-rendered pages.

The server preloads the initial values and the client then rehydrates them.

This means the client does not need to reload the flags. It simply rehydrates the result of the server-side rendering.

However, when you leave the window and come back to it, a new request is sent and the browser's flags are reevaluated. We use the visibility change API for that. You can try this by switching to another tab and then coming back to this one.

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