{"id":18,"date":"2026-06-06T21:48:38","date_gmt":"2026-06-06T21:48:38","guid":{"rendered":"https:\/\/softwareproduction.eu\/wordpress\/?p=18"},"modified":"2026-06-07T01:21:57","modified_gmt":"2026-06-07T01:21:57","slug":"a-b-testing-at-the-ssr-level-cookie-based-variant-selection","status":"publish","type":"post","link":"https:\/\/softwareproduction.eu\/?p=18","title":{"rendered":"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection"},"content":{"rendered":"\n

Eleventh in a series about migrating from legacy architectures to a modern Nuxt 4 stack.<\/em><\/p>\n\n\n\n

\n\n\n\n

Why A\/B Testing in SSR Is Different<\/h2>\n\n\n\n

In a client-side SPA, A\/B testing is simple: check a flag, choose a variant, render.<\/p>\n\n\n\n

In SSR, the decision has to happen before the HTML is generated<\/strong>. The server renders the full page and sends it to the browser. If variant selection happens after the server renders A but the client expects B, hydration breaks (Article 9).<\/p>\n\n\n\n

The variant must be fixed at the start of the SSR request, before any component renders. Every component must see the same assignment for the entire request.<\/p>\n\n\n\n

\n\n\n\n

The Architecture: Cookie-Based Variant Assignment<\/h2>\n\n\n\n

A common pattern uses a cookie (for example, abt<\/code>) to persist variant assignments across page loads. The cookie stores a compact format: testId:variant,testId:variant,...<\/code><\/p>\n\n\n\n

flowchart TD\n  subgraph Step1[\"Step 1: First Visit (no cookie)\"]\n    A1[\"Browser<br\/>Request: \/homepage\"] --> B1[\"Server<br\/>(SSR entry)\"]\n    B1 --> C1[\"Read cookie #quot;abt#quot;<br\/>Result: empty\"]\n    C1 --> D1[\"Fetch active A\/B tests<br\/>from headless CMS\"]\n    D1 --> E1[\"For each test:<br\/>hash(userId + testId) \u2192 variant\"]\n    E1 --> F1[\"Set cookie:<br\/>abt=pricing:A,hero:B\"]\n    F1 --> G1[\"Render HTML using<br\/>pricing=A, hero=B\"]\n    G1 --> H1[\"Return HTML<br\/>+ Set-Cookie header\"]\n    H1 --> I1[\"Browser receives HTML<br\/>+ cookie persisting assignment\"]\n  end\n\n  subgraph Step2[\"Step 2: Subsequent Visit (cookie exists)\"]\n    A2[\"Browser<br\/>Request: \/products<br\/>Cookie: abt=pricing:A,hero:B\"] --> B2[\"Server<br\/>(SSR entry)\"]\n    B2 --> C2[\"Read cookie<br\/>{pricing: A, hero: B}\"]\n    C2 --> D2[\"Render HTML using<br\/>persisted variants\"]\n    D2 --> E2[\"No re-assignment \u2014<br\/>user sees consistent UX\"]\n  end<\/pre>\n\n\n\n
Why Cookies and Not Server-Side State<\/h3>\n\n\n\n
Cookies are the only mechanism that satisfies all constraints:<\/p>\n\n\n\n
    \n
  1. Available during SSR<\/strong> \u2014 the server reads the cookie before rendering<\/li>\n
  2. Persistent across page loads<\/strong> \u2014 the user sees the same variant consistently<\/li>\n
  3. No server-side state<\/strong> \u2014 no session store, no database lookup, scales to any number of replicas<\/li>\n
  4. Works with CDN caching<\/strong> \u2014 the cookie varies the cache key per variant when needed<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n
    CMS-Driven Test Configuration<\/h2>\n\n\n\n
    In large enterprise applications, A\/B tests are typically defined as entries in a headless CMS, not in application code. Each test entry might specify:<\/p>\n\n\n\n
    Field<\/th>Example<\/th>Purpose<\/th><\/tr><\/thead>
    testId<\/code><\/td>pricing-display<\/code><\/td>Unique identifier<\/td><\/tr>
    variants<\/code><\/td>[\"A\", \"B\"]<\/code><\/td>Available variants<\/td><\/tr>
    trafficSplit<\/code><\/td>[50, 50]<\/code><\/td>Percentage per variant<\/td><\/tr>
    startDate<\/code><\/td>2025-06-01<\/code><\/td>Test activation date<\/td><\/tr>
    endDate<\/code><\/td>2025-07-01<\/code><\/td>Test deactivation date<\/td><\/tr>
    targetPages<\/code><\/td>[\"\/products\/*\"]<\/code><\/td>URL patterns where the test applies<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Content editors create, update, and schedule tests without involving the development team. The application fetches active test configuration from the CMS at startup and caches it.<\/p>\n\n\n\n
    flowchart LR\n  CMS[\"(Headless CMS)\"] -->|\"Define tests<br\/>(testId, variants,<br\/>trafficSplit, dates, pages)\"| Conf[AB Test Config]\n  Conf --> App[\"Nuxt App<br\/>(on startup)\"]\n  App --> Cache[In-memory config cache]\n  Cache --> SSR[\"SSR requests<br\/>(variant assignment)\"]<\/pre>\n\n\n\n
    \n\n\n\n
    The Composable: useAbTest<\/code><\/h2>\n\n\n\n
    Components consume A\/B test variants through a composable:<\/p>\n\n\n\n
    sequenceDiagram\n  participant C as Component\n  participant U as useAbTest('pricing')\n  participant S as SSR\/Client Runtime\n  participant ST as useState store\n\n  C->>U: const { variant } = useAbTest('pricing')\n  U->>S: Read current request's<br\/>variant map\n  S->>ST: Get variant map<br\/>(from cookie \/ payload)\n  ST-->>S: { pricing: 'A', ... }\n  S-->>U: 'A'\n  U-->>C: variant = 'A'\n\n  Note over S,ST: On SSR: variant map is created<br\/>before first component render\n\n  Note over S,ST: On client: variant map is hydrated<br\/>from Nuxt payload (no re-assignment)<\/pre>\n\n\n\n
    Usage in a Vue component:\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 const { variant } = useAbTest('pricing')    \u2502\n\u2502                                             \u2502\n\u2502 <template>                                  \u2502\n\u2502   <PricingDisplayA v-if=\"variant === 'A'\" \/>\u2502\n\u2502   <PricingDisplayB v-else \/>                \u2502\n\u2502 <\/template>                                 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\nWhat happens under the hood:\n  1. useAbTest reads the current request's\n     variant map (from cookie or server state)\n  2. Returns the assigned variant for this test\n  3. On SSR: variant is determined before render\n  4. On client: variant is hydrated from SSR state\n     (no re-assignment, no flicker)<\/code><\/pre>\n\n\n\n
    useAbTest<\/code> is SSR-safe: it reads from useState<\/code> (transferred from server to client via the Nuxt payload), so the client always sees what the server rendered.<\/p>\n\n\n\n
    \n\n\n\n
    URL-Based Override<\/h2>\n\n\n\n
    During development and QA, testers need to force specific variants without waiting for random assignment.<\/p>\n\n\n\n
    A URL parameter overrides the cookie:<\/p>\n\n\n\n
    Normal visit:\n  \/products \u2192 variant from cookie (e.g., A)\n\nOverride:\n  \/products?abt=pricing:B \u2192 forces variant B for pricing test\n  Cookie IS updated \u2014 the override persists across subsequent visits\n\nQA Workflow:\n  1. Test variant A: \/products?abt=pricing:A \u2192 verify\n  2. Test variant B: \/products?abt=pricing:B \u2192 verify\n  3. Compare \u2192 approve test<\/code><\/pre>\n\n\n\n
    flowchart TD\n  A[\"Browser<br\/>\/products?abt=pricing:B\"] --> B[Server middleware]\n  B --> C[\"Parse query param<br\/>abt=pricing:B\"]\n  C --> D[\"Read existing cookie<br\/>abt=pricing:A,hero:B\"]\n  D --> E[\"Merge override<br\/>pricing \u2192 B\"]\n  E --> F[\"Set updated cookie<br\/>abt=pricing:B,hero:B\"]\n  F --> G[\"SSR render using<br\/>pricing=B, hero=B\"]\n  G --> H[\"Subsequent visits<br\/>\/products \u2192 use cookie<br\/>(no query needed)\"]<\/pre>\n\n\n\n
    The override takes precedence and is merged into the cookie permanently. The server middleware merges the query parameter into existing assignments, and subsequent visits without the parameter continue using the overridden variant.<\/p>\n\n\n\n
    \n\n\n\n
    Debug Tooling<\/h2>\n\n\n\n
    A non-production debug panel can show active tests and allow switching variants in real time:<\/p>\n\n\n\n
    flowchart LR\n  Dev[QA \/ Developer] --> UI[\"Debug Panel<br\/>A\/B Tests Tab\"]\n  UI -->|Switch to A\/B| Tool[set-ab-test tool]\n  Tool --> Cookie[Update 'abt' cookie]\n  Cookie --> Reload[Reload page]\n  Reload --> SSR[\"SSR render<br\/>with new variants\"]\n\n  SSR --> UI2[\"Debug Panel shows<br\/>updated current variant\"]<\/pre>\n\n\n\n
    Debug Panel \u2014 A\/B Tests Tab:\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Active A\/B Tests                               \u2502\n\u2502                                                \u2502\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510   \u2502\n\u2502 \u2502 pricing-display                          \u2502   \u2502\n\u2502 \u2502 Current: A                               \u2502   \u2502\n\u2502 \u2502 [Switch to B] [Switch to A]              \u2502   \u2502\n\u2502 \u2502 Traffic: 50\/50                           \u2502   \u2502\n\u2502 \u2502 Active: Jun 1 - Jul 1                    \u2502   \u2502\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518   \u2502\n\u2502                                                \u2502\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510   \u2502\n\u2502 \u2502 hero-layout                              \u2502   \u2502\n\u2502 \u2502 Current: B                               \u2502   \u2502\n\u2502 \u2502 [Switch to A] [Switch to B]              \u2502   \u2502\n\u2502 \u2502 Traffic: 70\/30                           \u2502   \u2502\n\u2502 \u2502 Active: May 15 - Jun 30                  \u2502   \u2502\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518   \u2502\n\u2502                                                \u2502\n\u2502 Cookie: abt=pricing-display:A,hero-layout:B    \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\n
    Clicking “Switch to B” updates the cookie and reloads the page with the new variant. An internal debug chatbot can also switch variants programmatically via a set-ab-test<\/code> tool.<\/p>\n\n\n\n
    \n\n\n\n
    Measuring Results<\/h2>\n\n\n\n
    Variant assignments are tracked in analytics. Each page view includes the active variant assignments as custom properties:<\/p>\n\n\n\n
    Analytics Event:\n  event: \"page_view\"\n  properties:\n    page: \"\/products\"\n    ab_pricing: \"A\"\n    ab_hero: \"B\"<\/code><\/pre>\n\n\n\n
    flowchart LR\n  User[User page view] --> Page[Nuxt page]\n  Page --> Analytics[Analytics SDK]\n  Analytics --> Event[\"page_view event<br\/>+ ab_* properties\"]\n  Event --> Store[Analytics backend]\n  Store --> Seg[\"Analytics dashboard<br\/>segment by variant\"]\n  Seg --> Decision[\"Decide winning variant<br\/>(A or B)\"]\n  Decision --> CMS[\"(CMS config<br\/>update default or<br\/>deactivate test)\"]<\/pre>\n\n\n\n
    The analytics team segments conversion rates by variant. A typical workflow:<\/p>\n\n\n\n
      \n
    1. Run the test for 2\u20134 weeks (enough data for statistical significance)<\/li>\n
    2. Compare conversion rates per variant in the analytics dashboard<\/li>\n
    3. If variant B wins: update the CMS to make B the default (100% traffic)<\/li>\n
    4. If variant A wins: deactivate the test in the CMS (A was already the default)<\/li>\n<\/ol>\n\n\n\n
      No code changes are required either way. The lifecycle is entirely CMS-driven.<\/p>\n\n\n\n
      \n\n\n\n
      Cache Considerations<\/h2>\n\n\n\n
      A\/B testing interacts with page caching (Article 6). The cache key (for example, page-data:\/products<\/code>) does not<\/strong> include variant assignments.<\/p>\n\n\n\n
      This works because variants control which Vue component renders<\/strong>, not which CMS data is fetched. CMS data is the same regardless of variant \u2014 the variant only determines the component tree during SSR. Since the cache stores query results, not rendered HTML, the same data serves all variants.<\/p>\n\n\n\n
      flowchart LR\n  A[\"Incoming request<br\/>(with abt cookie)\"] --> B[Cache layer]\n  B -->|Key: page-data:\/products| C[Cached CMS data]\n  C --> D[SSR renderer]\n\n  subgraph VariantA[User with variant A]\n    D --> AComp[\"Render &lt;PricingDisplayA \/&gt;<br\/>using shared CMS data\"]\n  end\n\n  subgraph VariantB[User with variant B]\n    D --> BComp[\"Render &lt;PricingDisplayB \/&gt;<br\/>using shared CMS data\"]\n  end<\/pre>\n\n\n\n
      Cache layer:\n  Cache key: page-data:\/products\n  Cached: CMS data (shared across all variants)\n\nA\/B layer (runs after cache):\n  Variant A user \u2192 CMS data \u2192 renders <PricingDisplayA \/>\n  Variant B user \u2192 CMS data \u2192 renders <PricingDisplayB \/><\/code><\/pre>\n\n\n\n
      Variants must not trigger different CMS queries. If a future test requires variant-specific CMS content, the cache key would need to include variant assignments \u2014 but in many systems this is not necessary.<\/p>\n\n\n\n
      \n\n\n\n
      Lessons Learned<\/h2>\n\n\n\n
      The variant decision must happen before SSR begins<\/h3>\n\n\n\n
      This is the fundamental constraint. Any approach that determines the variant after the server starts rendering will cause hydration mismatches. The cookie must be read and the variant map populated before the first component\u2019s setup()<\/code> runs.<\/p>\n\n\n\n
      Cookies are the right persistence mechanism for SSR A\/B tests<\/h3>\n\n\n\n
      Server-side sessions add state. Local storage is unavailable during SSR. URL parameters are not persistent. Cookies are the only mechanism that is available on the server, persistent across requests, and stateless.<\/p>\n\n\n\n
      CMS-driven test configuration removes developer bottlenecks<\/h3>\n\n\n\n
      When tests are defined in the CMS, marketing or product teams can create and schedule them independently. Development only needs to build the variant components.<\/p>\n\n\n\n
      Debug tooling for A\/B tests is essential, not optional<\/h3>\n\n\n\n
      Without a way to force a variant, QA has to clear cookies and hope for the right assignment. URL override and the debug panel make variant testing deterministic.<\/p>\n\n\n\n
      \n\n\n\n
      What’s Next<\/h2>\n\n\n\n
        \n
      • Article 20<\/strong>: CMS Live Preview \u2014 Real-Time WYSIWYG Editing in SSR<\/em> \u2014 Making the CMS preview iframe work with server-side rendering.<\/li>\n
      • Article 21<\/strong>: Structured Logging in Nuxt \u2014 From console.log<\/code> to Production Observability<\/em> \u2014 Multi-sink logging with runtime control.<\/li>\n
      • Article 22<\/strong>: Building Production-Ready Nuxt Modules \u2014 Lifecycle, Hooks, and Conventions<\/em> \u2014 The patterns behind reliable module development.<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        Munir Husseini is a software architect specializing in full-stack TypeScript, .NET, and cloud-native architectures.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
        Eleventh in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Why A\/B Testing in SSR Is Different In a client-side SPA, A\/B testing is simple: check a flag, choose a variant, render. In SSR, the decision has to happen before the HTML is generated. The server renders the full page […]<\/p>\n","protected":false},"author":1,"featured_media":230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-web-app-with-nuxt-and-net"],"yoast_head":"\nA\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection - Software Production<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softwareproduction.eu\/?p=18\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection - Software Production\" \/>\n<meta property=\"og:description\" content=\"Eleventh in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Why A\/B Testing in SSR Is Different In a client-side SPA, A\/B testing is simple: check a flag, choose a variant, render. In SSR, the decision has to happen before the HTML is generated. The server renders the full page […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softwareproduction.eu\/?p=18\" \/>\n<meta property=\"og:site_name\" content=\"Software Production\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-06T21:48:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-07T01:21:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1880\" \/>\n\t<meta property=\"og:image:height\" content=\"1249\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Munir Husseini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Munir Husseini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18\"},\"author\":{\"name\":\"Munir Husseini\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/person\\\/fec48f54713e1bd117640fb9b748802f\"},\"headline\":\"A\\\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection\",\"datePublished\":\"2026-06-06T21:48:38+00:00\",\"dateModified\":\"2026-06-07T01:21:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18\"},\"wordCount\":825,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/11-ab-testing-at-ssr-level.jpg\",\"articleSection\":[\"Advanced Web App with Nuxt and .NET\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18\",\"name\":\"A\\\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection - Software Production\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/11-ab-testing-at-ssr-level.jpg\",\"datePublished\":\"2026-06-06T21:48:38+00:00\",\"dateModified\":\"2026-06-07T01:21:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/softwareproduction.eu\\\/?p=18\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#primaryimage\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/11-ab-testing-at-ssr-level.jpg\",\"contentUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/11-ab-testing-at-ssr-level.jpg\",\"width\":1880,\"height\":1249},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=18#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/softwareproduction.eu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A\\\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#website\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/\",\"name\":\"Softwareproduction\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/softwareproduction.eu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\",\"name\":\"Munir Husseini\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/softwareproduction-logo-32.png\",\"contentUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/softwareproduction-logo-32.png\",\"width\":32,\"height\":32,\"caption\":\"Munir Husseini\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/person\\\/fec48f54713e1bd117640fb9b748802f\",\"name\":\"Munir Husseini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"caption\":\"Munir Husseini\"},\"sameAs\":[\"https:\\\/\\\/softwareproduction.eu\\\/\"],\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection - Software Production","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softwareproduction.eu\/?p=18","og_locale":"en_US","og_type":"article","og_title":"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection - Software Production","og_description":"Eleventh in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Why A\/B Testing in SSR Is Different In a client-side SPA, A\/B testing is simple: check a flag, choose a variant, render. In SSR, the decision has to happen before the HTML is generated. The server renders the full page […]","og_url":"https:\/\/softwareproduction.eu\/?p=18","og_site_name":"Software Production","article_published_time":"2026-06-06T21:48:38+00:00","article_modified_time":"2026-06-07T01:21:57+00:00","og_image":[{"width":1880,"height":1249,"url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg","type":"image\/jpeg"}],"author":"Munir Husseini","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Munir Husseini","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softwareproduction.eu\/?p=18#article","isPartOf":{"@id":"https:\/\/softwareproduction.eu\/?p=18"},"author":{"name":"Munir Husseini","@id":"https:\/\/softwareproduction.eu\/#\/schema\/person\/fec48f54713e1bd117640fb9b748802f"},"headline":"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection","datePublished":"2026-06-06T21:48:38+00:00","dateModified":"2026-06-07T01:21:57+00:00","mainEntityOfPage":{"@id":"https:\/\/softwareproduction.eu\/?p=18"},"wordCount":825,"commentCount":0,"publisher":{"@id":"https:\/\/softwareproduction.eu\/#organization"},"image":{"@id":"https:\/\/softwareproduction.eu\/?p=18#primaryimage"},"thumbnailUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg","articleSection":["Advanced Web App with Nuxt and .NET"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softwareproduction.eu\/?p=18#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softwareproduction.eu\/?p=18","url":"https:\/\/softwareproduction.eu\/?p=18","name":"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection - Software Production","isPartOf":{"@id":"https:\/\/softwareproduction.eu\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softwareproduction.eu\/?p=18#primaryimage"},"image":{"@id":"https:\/\/softwareproduction.eu\/?p=18#primaryimage"},"thumbnailUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg","datePublished":"2026-06-06T21:48:38+00:00","dateModified":"2026-06-07T01:21:57+00:00","breadcrumb":{"@id":"https:\/\/softwareproduction.eu\/?p=18#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softwareproduction.eu\/?p=18"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/softwareproduction.eu\/?p=18#primaryimage","url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg","contentUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg","width":1880,"height":1249},{"@type":"BreadcrumbList","@id":"https:\/\/softwareproduction.eu\/?p=18#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softwareproduction.eu\/"},{"@type":"ListItem","position":2,"name":"A\/B Testing at the SSR Level \u2014 Cookie-Based Variant Selection"}]},{"@type":"WebSite","@id":"https:\/\/softwareproduction.eu\/#website","url":"https:\/\/softwareproduction.eu\/","name":"Softwareproduction","description":"","publisher":{"@id":"https:\/\/softwareproduction.eu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softwareproduction.eu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/softwareproduction.eu\/#organization","name":"Munir Husseini","url":"https:\/\/softwareproduction.eu\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/softwareproduction.eu\/#\/schema\/logo\/image\/","url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/05\/softwareproduction-logo-32.png","contentUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/05\/softwareproduction-logo-32.png","width":32,"height":32,"caption":"Munir Husseini"},"image":{"@id":"https:\/\/softwareproduction.eu\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softwareproduction.eu\/#\/schema\/person\/fec48f54713e1bd117640fb9b748802f","name":"Munir Husseini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","caption":"Munir Husseini"},"sameAs":["https:\/\/softwareproduction.eu\/"],"url":"https:\/\/softwareproduction.eu\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/11-ab-testing-at-ssr-level.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":9,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/18\/revisions\/231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}