Server-side Rendering Integration With Flagship [SSR]

This guide explains you how to use Flagship with nextJS using SSR mode.

📘

Next.js is used for this example

For this example, we have used the Next.js framework.
If you need more examples, please contact us at [email protected]

How it works

In server-side rendering (SSR), content is rendered on the server for every page request.

During this process, we fetch all flags that target the visitor and pass them as props to the __app.js component. This data is then used to populate the FlagshipProvider component.

📘

Note

Once your app has been loaded in a browser, you can use the Flagship SDK in the same way as you would in a client-side rendering mode.


Implementation

📘

Setup a NextJS project

Please refer to this article link to set up a NextJS project.

Once your project has been set up, you will need to install and initialize the Flagship React SDK.

yarn add @flagship.io/react-sdk

Initialize Flagship SDK server side

You have to create a module named startFlagshipSDK.js in the root directory of our project.

This module contains a function called startFlagshipSDK() which is responsible for initializing and starting the Flagship SDK.

The intention is to invoke this function when the server starts up.

//startFlagshipSDK.js

// Importing required modules from the Flagship React SDK
const { DecisionMode, Flagship, FSSdkStatus } = require("@flagship.io/react-sdk");

// Function to start the Flagship SDK
async function startFlagshipSDKAsync() {
    // Check if the Flagship SDK has already been initialized
    if (Flagship.getStatus() && Flagship.getStatus() !== FSSdkStatus.SDK_NOT_INITIALIZED) {
        return Flagship; // If it has been initialized, return early
    }
    // Start the Flagship SDK with the provided environment ID and API key
    return await Flagship.start(process.env.NEXT_PUBLIC_ENV_ID, process.env.NEXT_PUBLIC_API_KEY, {
        fetchNow: false, // Do not fetch flags immediately
        decisionMode: DecisionMode.DECISION_API // set decision mode : DECISION_API or BUCKETING
    });
}

// Export the startFlagshipSDK function
module.exports = { startFlagshipSDKAsync };

We will invoke the startFlagshipSDK() function from within our next.config.js file.

This file is executed whenever we run the build, start, or dev commands for our Next.js application.

As such, we can use it as a convenient location to start the Flagship SDK.

Here is the refactor of next.config.js:

//next.config.js

// Importing the startFlagshipSDK function from the startFlagshipSDK module
const { startFlagshipSDKAsync } = require('./startFlagshipSDK');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

// Exporting a function that returns the Next.js configuration object
module.exports = () => {
  // Check if the 'dev' or 'start' argument is present in the process arguments
  if (process.argv.includes('dev') || process.argv.includes('start')) {
    startFlagshipSDKAsync(); // If it is, start the Flagship SDK
  }
  return nextConfig; // Return the Next.js configuration object
};

Initialize Flagship in the project

We will customize the next component App to initialize the Flagship SDK.

//pages/__page.jsx

import { FlagshipProvider } from '@flagship.io/react-sdk'
import '../styles/globals.css'


function MyApp({ Component, pageProps }) {
  const { initialVisitorData, initialFlagsData } = pageProps
  return (
    
      
    )

}

export default MyApp

Our MyApp component will have two props: initialVisitorData and initialFlagsData.

The initialVisitorData prop contains data about the visitor, while the initialFlagsData prop contains the FlagsData that was fetched from the getServerSideProps function during a page request.

This data is used to populate the FlagshipProvider component.

There is no need to initialize the Flagship SDK again in the getServerSideProps function, as it has already been initialized when our Next.js application started up. Instead, we can simply create a visitor and fetch the relevant flags.

Here is the index page:

// pages/index.jsx

// Importing required modules from the Flagship React SDK
import {
  useFsFlag,
  useFlagship,
  Flagship,
  HitType,
  EventCategory,
} from "@flagship.io/react-sdk";
import styles from "../styles/Home.module.css";

// Home page component
export default function Home() {
  // Get the Flagship instance
  const fs = useFlagship();

  // Get the value of the 'my_flag_key' flag
  const myFlag = useFsFlag("my_flag_key");

  // Function to send a hit to Flagship
  const onSendHitClick = () => {
    fs.sendHits({
      type: HitType.EVENT,
      category: EventCategory.ACTION_TRACKING,
      action: "click button",
    });
  };

  return (
    

Next ServerSide Rendering Integration With Flagship [SSR]

flag key: my_flag_key

flag value: {myFlag.getValue("default-value")}

); } // This function runs only on the server side export async function getServerSideProps(context) { const { res, req } = context; // Get the visitor ID from the 'fs_visitorID_cookie' cookie if it exists const fs_visitorID_cookie = req.cookies["fs_visitorID_cookie"]; // Define initial visitor data const initialVisitorData = { id: fs_visitorID_cookie, // If the cookie does not exist, the SDK will generate a new visitor ID hasConsented: true, context: { any: "value", }, }; // Create a new visitor using the initial visitor data const visitor = Flagship.newVisitor({ visitorId: initialVisitorData.id, context: initialVisitorData.context, hasConsented: initialVisitorData.hasConsented }); // Fetch flags for the visitor await visitor.fetchFlags(); // Set the 'fs_visitorID_cookie' cookie with the visitor ID res.setHeader("Set-Cookie", `fs_visitorID_cookie=${visitor.visitorId}`); // Pass data to the page via props return { props: { initialFlagsData: visitor.getFlags().toJSON(), initialVisitorData: { ...initialVisitorData, id: visitor.visitorId, }, }, }; }

In the getServerSideProps of the index component page, we :

  • fetch the flags for the targeted visitor
  • pass the fetched flags to the page via props

Alternate Approach

We have refactored the index.jsx module. The startFlagshipSDKAsync function will no longer be called in the next.config.js file. Instead, it will be called on each page in the getServerSideProps function.

// pages/index.jsx

// Importing required modules from the Flagship React SDK
import {
  useFsFlag,
  useFlagship,
  HitType,
  EventCategory,
} from "@flagship.io/react-sdk";
import styles from "../styles/Home.module.css";
import { startFlagshipSDKAsync } from "../startFlagshipSDK"; // Importing startFlagshipSDKAsync function

// Home page component
export default function Home() {
  // Get the Flagship instance
  const fs = useFlagship();

  // Get the value of the 'my_flag_key' flag
  const myFlag = useFsFlag("my_flag_key");

  // Function to send a hit to Flagship
  const onSendHitClick = () => {
    fs.hit.sendHits({
      type: HitType.EVENT,
      category: EventCategory.ACTION_TRACKING,
      action: "click button",
    });
  };

  return (
    

Next ServerSide Rendering Integration With Flagship [SSR]

flag key: my_flag_key

flag value: {myFlag.getValue("default-value")}

); } // This function runs only on the server side export async function getServerSideProps(context) { const { res, req } = context; // Get the visitor ID from the 'fs_visitorID_cookie' cookie if it exists const fs_visitorID_cookie = req.cookies["fs_visitorID_cookie"]; // Define initial visitor data const initialVisitorData = { id: fs_visitorID_cookie, // If the cookie does not exist, the SDK will generate a new visitor ID hasConsented: true, context: { any: "value", }, }; // start the SDK et get the Flagship instance const flagship = await startFlagshipSDKAsync(); // Create a new visitor using the initial visitor data const visitor = flagship.newVisitor({ visitorId: initialVisitorData.id, context: initialVisitorData.context, hasConsented: initialVisitorData.hasConsented }); // Fetch flags for the visitor await visitor.fetchFlags(); // Set the 'fs_visitorID_cookie' cookie with the visitor ID res.setHeader("Set-Cookie", `fs_visitorID_cookie=${visitor.visitorId}`); // Pass data to the page via props return { props: { initialFlagsData: visitor.getFlags().toJSON(), initialVisitorData: { ...initialVisitorData, id: visitor.visitorId, }, }, }; }

🚧

The first request may take a little longer to process, but subsequent requests will be processed almost instantly.

Do you have any feedback or suggestions? Would you like to see another tutorial? Contact us with your thoughts [email protected].

You can view the full code for this example on github


","html_footer":"","html_body":"","html_promo":"","javascript_hub2":"","javascript":"","stylesheet_hub2":"","stylesheet":"","favicon":["https://files.readme.io/f752ff2af794a60817f805643e50eca9b6ece82ecabce5e1330b94a00972e7cb-small-ABTasty_Marque_Yellow_small.png","f752ff2af794a60817f805643e50eca9b6ece82ecabce5e1330b94a00972e7cb-small-ABTasty_Marque_Yellow_small.png",35,32,"#d4fc04","https://files.readme.io/cb34f6c05c74f4a3266c28591a27fb0115bf92ba95d1472c85a3bfa877456a18-ABTasty_Marque_Yellow_small.png","66e21fb3ab0cd3000f012006"],"logo_white_use":true,"logo_white":["https://files.readme.io/d760334ef760b9850e03033ca3ee10065da4fc991edce662d0adabaaa502bf44-small-Logo.FER.White.Small.png","d760334ef760b9850e03033ca3ee10065da4fc991edce662d0adabaaa502bf44-small-Logo.FER.White.Small.png",523,80,"#ffffff","https://files.readme.io/6cf190bece7dc0371b785f67199f09f459b86ab7be06d734b43da8515bf73c31-Logo.FER.White.Small.png","66e21f7faad094004498a762"],"logo":["https://files.readme.io/924b6fced0177b97a2333057d92c722284e1fc5994d2a87ad98aab9e5d9222fe-small-Logo.FER.Blue.Small.png","924b6fced0177b97a2333057d92c722284e1fc5994d2a87ad98aab9e5d9222fe-small-Logo.FER.Blue.Small.png",523,80,"#dcdce4","https://files.readme.io/5bebeb29e71174ae8ef3ef721b54658f2fde9ed63b6c9b7a1ba5dee0adf17ce5-Logo.FER.Blue.Small.png","66e21f780960780069648645"],"promos":[{"extras":{"type":"buttons","buttonPrimary":"get-started","buttonSecondary":"docs"},"title":"Feature Experimentation & Rollouts - Developer Docs","text":"Welcome to the Feature Experimentation & Rollouts Developer Hub.\n\nFeature Experimentation & Rollouts is AB Tasty's dedicated product optimization platform for teams to manage, release, personalize, and experiment with features across all codebases, channels, and devices.\n\nWant access?\nCreate your free account now: https://www.flagship.io/sign-up/","_id":"5e4aa55643caba00730ba9be"}],"body":{"style":"none"},"header":{"img_pos":"tl","img_size":"auto","img":[],"style":"solid","linkStyle":"buttons"},"typography":{"tk_body":"","tk_headline":"","tk_key":"","typekit":false,"body":"Open+Sans:400:sans-serif","headline":"Open+Sans:400:sans-serif"},"colors":{"body_highlight":"#A3B902","header_text":"","main_alt":"","main":"#3100BE","highlight":"","custom_login_link_color":""},"main_body":{"type":"links"},"splitReferenceDocs":false,"childrenAsPills":false,"hide_logo":true,"sticky":false,"landing":true,"overlay":"circuits","theme":"solid","link_logo_to_url":false,"referenceLayout":"column","subheaderStyle":"dropdown","showMetricsInReference":true,"rdmd":{"callouts":{"useIconFont":false},"theme":{"background":"","border":"","markdownEdge":"","markdownFont":"","markdownFontSize":"","markdownLineHeight":"","markdownRadius":"","markdownText":"","markdownTitle":"","markdownTitleFont":"","mdCodeBackground":"","mdCodeFont":"","mdCodeRadius":"","mdCodeTabs":"","mdCodeText":"","tableEdges":"","tableHead":"","tableHeadText":"","tableRow":"","tableStripe":"","tableText":"","text":"","title":""}},"referenceSimpleMode":true,"stylesheet_hub3":"","loginLogo":[],"logo_large":true,"colorScheme":"system","changelog":{"layoutExpanded":false,"showAuthor":true,"showExactDate":false},"allowApiExplorerJsonEditor":false,"ai_dropdown":"enabled","ai_options":{"chatgpt":"enabled","claude":"enabled","clipboard":"enabled","view_as_markdown":"enabled","copilot":"enabled"},"showPageIcons":true},"custom_domain":"docs.developers.flagship.io","childrenProjects":[],"derivedPlan":"startup2018","description":"Learn about using Flagship, AB Tasty's Feature and Experimentation Management platform. Direct access to API reference and SDKs, how to's and developer guides.","isExternalSnippetActive":false,"error404":"","experiments":[],"first_page":"landing","flags":{"translation":false,"directGoogleToStableVersion":false,"disableAnonForum":false,"newApiExplorer":true,"newMarkdown":false,"newEditor":true,"hideGoogleAnalytics":false,"cookieAuthentication":false,"allowXFrame":false,"speedyRender":false,"correctnewlines":false,"swagger":false,"oauth":false,"migrationSwaggerRun":false,"migrationRun":false,"hub2":true,"enterprise":false,"allow_hub2":false,"alwaysShowDocPublishStatus":false,"newSearch":true,"tutorials":true,"useReactApp":true,"allowApiExplorerJsonEditor":false,"allowReferenceUpgrade":false,"dashReact":false,"graphql":false,"newMarkdownBetaProgram":true,"oldMarkdown":false,"rdmdCompatibilityMode":false,"singleProjectEnterprise":false,"staging":false,"metricsV2":true,"newEditorDash":true,"enableRealtimeExperiences":false,"reviewWorkflow":true,"star":false,"allowDarkMode":false,"forceDarkMode":false,"useReactGLP":false,"disablePasswordlessLogin":false,"personalizedDocs":false,"myDevelopers":false,"superHub":true,"developerDashboard":false,"allowReusableOTPs":false,"dashHomeRefresh":false,"owlbotAi":false,"apiV2":false,"git":{"read":false,"write":false},"superHubBeta":false,"dashQuickstart":false,"disableAutoTranslate":false,"customBlocks":false,"devDashHub":false,"disableSAMLScoping":false,"allowUnsafeCustomHtmlSuggestionsFromNonAdmins":false,"apiAccessRevoked":false,"passwordlessLogin":"default","disableSignups":false,"billingRedesignEnabled":true,"developerPortal":false,"mdx":true,"superHubDevelopment":false,"annualBillingEnabled":true,"devDashBillingRedesignEnabled":false,"enableOidc":false,"customComponents":true,"disableDiscussionSpamRecaptchaBypass":false,"developerViewUsersData":false,"changelogRssAlwaysPublic":false,"bidiSync":true,"superHubMigrationSelfServeFlow":true,"apiDesigner":false,"hideEnforceSSO":false,"localLLM":false,"superHubManageVersions":true,"gitSidebar":true,"superHubGlobalCustomBlocks":false,"childManagedBidi":false,"superHubBranches":false,"externalSdkSnippets":false,"migrationPreview":false,"requiresJQuery":false,"superHubPreview":false},"fullBaseUrl":"https://docs.developers.flagship.io/","git":{"migration":{"createRepository":{"start":"2025-01-14T11:26:59.981Z","end":"2025-01-14T11:27:00.758Z","status":"successful"},"transformation":{"end":"2025-01-14T11:27:02.464Z","start":"2025-01-14T11:27:01.196Z","status":"successful"},"migratingPages":{"end":"2025-01-14T11:27:04.793Z","start":"2025-01-14T11:27:02.496Z","status":"successful"},"enableSuperhub":{"start":"2025-01-14T12:28:05.135Z","status":"successful","end":"2025-01-14T12:28:05.135Z"}},"sync":{"linked_repository":{"id":"917183488","name":"readme.io","url":"https://github.com/flagship-io/readme.io","provider_type":"github","privacy":{"visibility":"private","private":true},"linked_at":"2025-01-15T14:17:06.678Z","linked_by":"55f0353fd58f9b1900acf993","connection":"6787c2b79038ee984c933bdc","full_name":"flagship-io/readme.io","error":{}},"installationRequest":{},"connections":[{"_id":"6787c2b79038ee984c933bdc","active":true,"created_at":"2025-01-15T14:14:13.000Z","installation_id":59615051,"owner":{"type":"Organization","id":80262559,"login":"flagship-io","site_admin":false},"provider_type":"github"}],"providers":[]}},"glossaryTerms":[{"_id":"611fb9eba0648a0018313b47","term":"KPI","definition":"Collect events and analysed through the KPIs feature inside your report. You can set all the KPIs you want to analysed in the first step of the use case creation."},{"_id":"611fb9fb3fc26b0204e56988","term":"flags","definition":"A flag is a variable present in your code that you want to act on with a specific value (Boolean, integer, string). That variable can also be called Dynamic Variable or Remote Variable.\nFlagship will be the remote for the feature behind the flag."},{"_id":"611fba1354861501f2a2872a","term":"Server SDK","definition":"A Server SDK is a library present in your server.\nIt manages several users at a time (thousands/billions)."},{"_id":"611fba4962a583002c503523","term":"Client SDK","definition":"A Client SDK is a library present in the code of the device (mobile, browser, IoT, ...) and serves only one user at a time.\nExample: An Android application would benefit from the Android SDK. That SDK is directly present inside the code of the application, on the device of the user. That's a client SDK. It also means that it serves only one user at a time."},{"_id":"611fba60c0d2f70241d2c0a0","term":"Environments","definition":"Each environment gives the customer the possibility to separate their features and experiments inside the platform: the ones which are already in production from the ones which have not been released yet and are still in QA."},{"_id":"611fba81210c990022e60eaa","term":"Panic Mode","definition":"The panic mode is a way to not display any modifications set up in Flagship anymore. It could be also used as a \"Code Freeze mode\""},{"_id":"611fbada60399d025030d6e1","term":"visitorId","definition":"The visitorId has to be unique for each user/visitor. Thanks to that ID, you can guarantee the same experience to each of your users every time."},{"_id":"611fbb5ebe6f91002b629916","term":"user context","definition":"It enables you to target your visitors/users. Each user has a context with some criteria."}],"graphqlSchema":"","gracePeriod":{"enabled":false,"endsAt":null},"shouldGateDash":false,"healthCheck":{"provider":"","settings":{}},"intercom_secure_emailonly":false,"intercom":"","is_active":true,"integrations":{"login":{}},"internal":"","jwtExpirationTime":0,"landing_bottom":[{"type":"text","alignment":"left","pageType":"Documentation","text":"> 📘 Nota bene:\n> \n> In all article, Flagship refers to the **AB Tasty - Feature Experimentation & Rollouts**\n> [Learn more](https://flagship.zendesk.com/hc/en-us/articles/7536827849628--Flagship-January-2023-Release-Notes-)","title":""},{"type":"docs","alignment":"left","pageType":"Documentation"},{"type":"html","alignment":"left"}],"mdxMigrationStatus":"rdmd","metrics":{"thumbsEnabled":true,"enabled":false,"monthlyLimit":0,"planLimit":1000000,"realtime":{"dashEnabled":false,"hubEnabled":false},"monthlyPurchaseLimit":0,"meteredBilling":{}},"modules":{"logs":false,"suggested_edits":true,"discuss":false,"changelog":false,"reference":true,"examples":false,"docs":true,"landing":true,"custompages":true,"tutorials":false,"graphql":false},"name":"Developer Docs | Flagship","nav_names":{"discuss":"","changelog":"","reference":"","docs":"","tutorials":"","recipes":""},"oauth_url":"","onboardingCompleted":{"documentation":true,"appearance":true,"api":true,"jwt":true,"logs":true,"domain":false,"metricsSDK":false},"owlbot":{"enabled":false,"isPaying":false,"customization":{"answerLength":"long","customTone":"","defaultAnswer":"","forbiddenWords":"","tone":"neutral"},"copilot":{"enabled":false,"hasBeenUsed":false,"installedCustomPage":""}},"owner":{"id":null,"email":null,"name":null},"plan":"startup2018","planOverride":null,"planSchedule":{"stripeScheduleId":null,"changeDate":null,"nextPlan":null},"planStatus":"active","planTrial":"startup2018","readmeScore":{"components":{"newDesign":{"enabled":true,"points":25},"reference":{"enabled":true,"points":50},"tryItNow":{"enabled":true,"points":35},"syncingOAS":{"enabled":true,"points":10},"customLogin":{"enabled":true,"points":25},"metrics":{"enabled":false,"points":40},"recipes":{"enabled":false,"points":15},"pageVoting":{"enabled":true,"points":1},"suggestedEdits":{"enabled":true,"points":10},"support":{"enabled":true,"points":5},"htmlLanding":{"enabled":true,"points":5},"guides":{"enabled":true,"points":10},"changelog":{"enabled":false,"points":5},"glossary":{"enabled":true,"points":1},"variables":{"enabled":true,"points":1},"integrations":{"enabled":true,"points":2}},"totalScore":180},"reCaptchaSiteKey":"","reference":{"alwaysUseDefaults":true,"defaultExpandResponseExample":false,"defaultExpandResponseSchema":false,"enableOAuthFlows":false},"seo":{"overwrite_title_tag":false},"stable":{"_id":"61127b93152a69007f6f75ee","version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["61127b93152a69007f6f75ef","61127b93152a69007f6f75f0","61127b93152a69007f6f75f1","61167ebb4ffec7006c3bf3d7","617a75a9582fae0100031dcf","6266521a411bce0080258339","630c707cce745900524cc769","6310d692b9f5840027490f73","6310d6f1be9c8f0c90d7108d","6310d71126a47c0084480c31","6310d73268005608a5f88ae3","6310d76d64b05a009668621d","6310d7880db1780013144da0","63232099e50bcd003fba5830","632320b7a3ed67005851f379","63232b9160ed7a04b14d59ef","632330f66e1d9c0bbfdbde4d","632356b0a5217f0092efd148","63288e26fffa4100658b1fd7","6329b49ea2f170000f651b9b","6376bf2f127d99000316ffe7","63886d7f8c6237000fb18bd0","63886f1f2d3b0600333f932b","638f4793a84bf400948f699a","63ad6d5ceca94e0038f04840","63ad7013dd9ca6000f9cccca","63adbb18068308000f3dd078","63adbc370ceca3007f62d6dd","63adbfea6921f50035421fbf","63adc5c6238ed904f03ccdae","63b2eda7cd178800586136fc","63b3005c43e0a3073bb71707","63b3035419df1a01bc9c5d59","63b30c3419df1a01bc9cfe21","63b30c5bb27a5f001643f6c3","63b3f025231ccd006d0ce90c","63b3fc8c54e4910038edac11","63da3a3a8523cc0058debdad","6400b814e6b6dc036e36d32d","6596c2727559eb00478048a4"],"project":"5e4aa55643caba00730ba9bd","releaseDate":"2021-08-10T13:13:55.093Z","createdAt":"2021-08-10T13:13:55.093Z","__v":0,"updatedAt":"2024-01-04T14:36:34.707Z","pdfStatus":"","apiRegistries":[{"name":"flagship-decision-api","url":"esno3kl2ef2rau"},{"name":"flagship-remote-control-api","url":"499rumw19lfi0azbt"},{"name":"auth-server","url":"53z41l88y2kpj"}]},"subdomain":"flagship","subpath":"","superHubWaitlist":false,"topnav":{"edited":true,"right":[{"type":"search"},{"type":"user","text":"User","url":"/login?redirect_uri=/docs/avoid-flickering-with-nextjs-ssr"}],"left":[{"type":"url","text":"Developer Documentation","url":"https://docs.developers.flagship.io/"}],"bottom":[]},"trial":{"trialEndsAt":"2020-03-17T14:38:14.358Z","trialDeadlineEnabled":true},"translate":{"languages":[],"project_name":"","org_name":"","key_public":"","show_widget":false,"provider":"transifex"},"url":"https://www.flagship.io","versions":[{"_id":"679a3cb2ab901b0012f0f9f2","version":"0.0.0-preprod","version_clean":"0.0.0-preprod","codename":"0.0.0-preprod","is_stable":false,"is_beta":false,"is_hidden":true,"is_deprecated":false,"categories":["679a3cb1ab901b0012f0f88b","679a3cb1ab901b0012f0f88c","679a3cb1ab901b0012f0f88d","679a3cb1ab901b0012f0f88e","679a3cb1ab901b0012f0f88f","6266521a411bce0080258339","630c707cce745900524cc769","6310d692b9f5840027490f73","6310d6f1be9c8f0c90d7108d","6310d71126a47c0084480c31","6310d73268005608a5f88ae3","6310d76d64b05a009668621d","6310d7880db1780013144da0","63232099e50bcd003fba5830","679a3cb1ab901b0012f0f890","679a3cb1ab901b0012f0f891","632330f66e1d9c0bbfdbde4d","632356b0a5217f0092efd148","63288e26fffa4100658b1fd7","679a3cb1ab901b0012f0f892","679a3cb1ab901b0012f0f893","63886d7f8c6237000fb18bd0","63886f1f2d3b0600333f932b","638f4793a84bf400948f699a","63ad6d5ceca94e0038f04840","63ad7013dd9ca6000f9cccca","63adbb18068308000f3dd078","63adbc370ceca3007f62d6dd","63adbfea6921f50035421fbf","63adc5c6238ed904f03ccdae","63b2eda7cd178800586136fc","63b3005c43e0a3073bb71707","63b3035419df1a01bc9c5d59","63b30c3419df1a01bc9cfe21","63b30c5bb27a5f001643f6c3","63b3f025231ccd006d0ce90c","63b3fc8c54e4910038edac11","679a3cb1ab901b0012f0f894","679a3cb1ab901b0012f0f895","679a3cb1ab901b0012f0f896"],"pdfStatus":"","project":"5e4aa55643caba00730ba9bd","releaseDate":"2021-08-10T13:13:55.093Z","createdAt":"2025-01-29T14:35:26.504Z","__v":0,"updatedAt":"2025-01-29T14:35:26.504Z","forked_from":"61127b93152a69007f6f75ee","apiRegistries":[{"name":"flagship-decision-api","url":"esno3kl2ef2rau"},{"name":"flagship-remote-control-api","url":"499rumw19lfi0azbt"},{"name":"auth-server","url":"53z41l88y2kpj"}]},{"_id":"679ce7a096cdeb000f5423e3","version":"0.1.1-doc","version_clean":"0.1.1-doc","codename":"Flagship Reference","is_stable":false,"is_beta":false,"is_hidden":true,"is_deprecated":false,"categories":["679ce7a096cdeb000f54227c","679ce7a096cdeb000f54227d","679ce7a096cdeb000f54227e","679ce7a096cdeb000f54227f","679ce7a096cdeb000f542280","6266521a411bce0080258339","630c707cce745900524cc769","6310d692b9f5840027490f73","6310d6f1be9c8f0c90d7108d","6310d71126a47c0084480c31","6310d73268005608a5f88ae3","6310d76d64b05a009668621d","6310d7880db1780013144da0","63232099e50bcd003fba5830","679ce7a096cdeb000f542281","679ce7a096cdeb000f542282","632330f66e1d9c0bbfdbde4d","632356b0a5217f0092efd148","63288e26fffa4100658b1fd7","679ce7a096cdeb000f542283","6376bf2f127d99000316ffe7","63886d7f8c6237000fb18bd0","63886f1f2d3b0600333f932b","638f4793a84bf400948f699a","63ad6d5ceca94e0038f04840","63ad7013dd9ca6000f9cccca","63adbb18068308000f3dd078","63adbc370ceca3007f62d6dd","63adbfea6921f50035421fbf","63adc5c6238ed904f03ccdae","63b2eda7cd178800586136fc","63b3005c43e0a3073bb71707","63b3035419df1a01bc9c5d59","63b30c3419df1a01bc9cfe21","63b30c5bb27a5f001643f6c3","63b3f025231ccd006d0ce90c","63b3fc8c54e4910038edac11","679ce7a096cdeb000f542284","679ce7a096cdeb000f542285","679ce7a096cdeb000f542286","679ce7a096cdeb000f5423e5"],"pdfStatus":"","project":"5e4aa55643caba00730ba9bd","releaseDate":"2021-08-10T13:13:55.093Z","createdAt":"2025-01-31T15:09:19.440Z","__v":1,"updatedAt":"2025-01-31T15:09:52.432Z","forked_from":"61127b93152a69007f6f75ee","apiRegistries":[{"name":"flagship-decision-api","url":"esno3kl2ef2rau"},{"name":"flagship-remote-control-api","url":"499rumw19lfi0azbt"},{"name":"auth-server","url":"53z41l88y2kpj"}]},{"_id":"6810d743b32a3c0011bc960e","version":"1.0-FixFlutter","version_clean":"1.0.0-FixFlutter","codename":"","is_stable":false,"is_beta":false,"is_hidden":true,"is_deprecated":false,"categories":[],"pdfStatus":"","source":"readme","forked_from":"61127b93152a69007f6f75ee","createdAt":"2025-04-29T13:42:27.003Z","project":"5e4aa55643caba00730ba9bd","apiRegistries":[{},{},{}],"releaseDate":"2025-04-29T13:42:27.004Z","updatedAt":"2025-04-29T13:42:27.003Z","__v":0},{"_id":"68024865817782003538000a","version":"1.0-codebase-analyzer-vscode-guide","version_clean":"1.0.0-codebase-analyzer-vscode-guide","codename":"","is_stable":false,"is_beta":false,"is_hidden":true,"is_deprecated":false,"categories":[],"pdfStatus":"","source":"readme","forked_from":"61127b93152a69007f6f75ee","createdAt":"2025-04-18T12:41:09.034Z","project":"5e4aa55643caba00730ba9bd","apiRegistries":[{},{},{}],"releaseDate":"2025-04-18T12:41:09.036Z","updatedAt":"2025-04-18T12:41:09.034Z","__v":0},{"_id":"67d9391510ba08004c38f4da","version":"1.0-flutter","version_clean":"1.0.0-flutter","codename":"","is_stable":false,"is_beta":false,"is_hidden":true,"is_deprecated":false,"categories":[],"pdfStatus":"","forked_from":"61127b93152a69007f6f75ee","createdAt":"2025-03-18T09:12:53.380Z","project":"5e4aa55643caba00730ba9bd","apiRegistries":[{},{},{}],"releaseDate":"2025-03-18T09:12:53.381Z","updatedAt":"2025-03-18T09:12:53.380Z","__v":0},{"_id":"67e6ffd0e78129003dc55824","version":"1.0-js-fix","version_clean":"1.0.0-js-fix","codename":"","is_stable":false,"is_beta":false,"is_hidden":true,"is_deprecated":false,"categories":[],"pdfStatus":"","source":"readme","forked_from":"61127b93152a69007f6f75ee","createdAt":"2025-03-28T20:00:16.414Z","project":"5e4aa55643caba00730ba9bd","apiRegistries":[{},{},{}],"releaseDate":"2025-03-28T20:00:16.416Z","updatedAt":"2025-03-28T20:00:16.414Z","__v":0},{"_id":"61127b93152a69007f6f75ee","version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["61127b93152a69007f6f75ef","61127b93152a69007f6f75f0","61127b93152a69007f6f75f1","61167ebb4ffec7006c3bf3d7","617a75a9582fae0100031dcf","6266521a411bce0080258339","630c707cce745900524cc769","6310d692b9f5840027490f73","6310d6f1be9c8f0c90d7108d","6310d71126a47c0084480c31","6310d73268005608a5f88ae3","6310d76d64b05a009668621d","6310d7880db1780013144da0","63232099e50bcd003fba5830","632320b7a3ed67005851f379","63232b9160ed7a04b14d59ef","632330f66e1d9c0bbfdbde4d","632356b0a5217f0092efd148","63288e26fffa4100658b1fd7","6329b49ea2f170000f651b9b","6376bf2f127d99000316ffe7","63886d7f8c6237000fb18bd0","63886f1f2d3b0600333f932b","638f4793a84bf400948f699a","63ad6d5ceca94e0038f04840","63ad7013dd9ca6000f9cccca","63adbb18068308000f3dd078","63adbc370ceca3007f62d6dd","63adbfea6921f50035421fbf","63adc5c6238ed904f03ccdae","63b2eda7cd178800586136fc","63b3005c43e0a3073bb71707","63b3035419df1a01bc9c5d59","63b30c3419df1a01bc9cfe21","63b30c5bb27a5f001643f6c3","63b3f025231ccd006d0ce90c","63b3fc8c54e4910038edac11","63da3a3a8523cc0058debdad","6400b814e6b6dc036e36d32d","6596c2727559eb00478048a4"],"project":"5e4aa55643caba00730ba9bd","releaseDate":"2021-08-10T13:13:55.093Z","createdAt":"2021-08-10T13:13:55.093Z","__v":0,"updatedAt":"2024-01-04T14:36:34.707Z","pdfStatus":"","apiRegistries":[{"name":"flagship-decision-api","url":"esno3kl2ef2rau"},{"name":"flagship-remote-control-api","url":"499rumw19lfi0azbt"},{"name":"auth-server","url":"53z41l88y2kpj"}]}],"variableDefaults":[{"source":"","_id":"6373cab5f93f9f125712b7fe","name":"apiurl","default":"https://decision.flagship.io/v2","type":""},{"source":"","_id":"611a8b3ccd1de0002364b7fb","name":"toto","default":"coucou","type":""},{"source":"security","_id":"64196db40dab86002d6afe1b","name":"Authorization","type":"apiKey","apiSetting":"632320b7a3ed67005851f378"}],"webhookEnabled":false,"isHubEditable":true},"projectStore":{"data":{"allow_crawlers":"disabled","canonical_url":null,"default_version":{"name":"1.0"},"description":"Learn about using Flagship, AB Tasty's Feature and Experimentation Management platform. Direct access to API reference and SDKs, how to's and developer guides.","git":{"connection":{"repository":{"full_name":"flagship-io/readme.io","name":"readme.io","provider_type":"github","url":"https://github.com/flagship-io/readme.io"},"organization":{"name":"flagship-io","provider_type":"github"},"status":"active"}},"glossary":[{"_id":"611fb9eba0648a0018313b47","term":"KPI","definition":"Collect events and analysed through the KPIs feature inside your report. You can set all the KPIs you want to analysed in the first step of the use case creation."},{"_id":"611fb9fb3fc26b0204e56988","term":"flags","definition":"A flag is a variable present in your code that you want to act on with a specific value (Boolean, integer, string). That variable can also be called Dynamic Variable or Remote Variable.\nFlagship will be the remote for the feature behind the flag."},{"_id":"611fba1354861501f2a2872a","term":"Server SDK","definition":"A Server SDK is a library present in your server.\nIt manages several users at a time (thousands/billions)."},{"_id":"611fba4962a583002c503523","term":"Client SDK","definition":"A Client SDK is a library present in the code of the device (mobile, browser, IoT, ...) and serves only one user at a time.\nExample: An Android application would benefit from the Android SDK. That SDK is directly present inside the code of the application, on the device of the user. That's a client SDK. It also means that it serves only one user at a time."},{"_id":"611fba60c0d2f70241d2c0a0","term":"Environments","definition":"Each environment gives the customer the possibility to separate their features and experiments inside the platform: the ones which are already in production from the ones which have not been released yet and are still in QA."},{"_id":"611fba81210c990022e60eaa","term":"Panic Mode","definition":"The panic mode is a way to not display any modifications set up in Flagship anymore. It could be also used as a \"Code Freeze mode\""},{"_id":"611fbada60399d025030d6e1","term":"visitorId","definition":"The visitorId has to be unique for each user/visitor. Thanks to that ID, you can guarantee the same experience to each of your users every time."},{"_id":"611fbb5ebe6f91002b629916","term":"user context","definition":"It enables you to target your visitors/users. Each user has a context with some criteria."}],"homepage_url":"https://www.flagship.io","id":"5e4aa55643caba00730ba9bd","name":"Developer Docs | Flagship","parent":null,"redirects":[],"sitemap":"disabled","llms_txt":"disabled","subdomain":"flagship","suggested_edits":"enabled","uri":"/projects/me","variable_defaults":[{"name":"apiurl","default":"https://decision.flagship.io/v2","source":"","type":"","id":"6373cab5f93f9f125712b7fe"},{"name":"toto","default":"coucou","source":"","type":"","id":"611a8b3ccd1de0002364b7fb"},{"name":"Authorization","source":"security","type":"apiKey","id":"64196db40dab86002d6afe1b"}],"webhooks":[],"api_designer":{"allow_editing":"enabled"},"custom_login":{"login_url":null,"logout_url":null},"features":{"mdx":"enabled"},"mcp":{},"onboarding_completed":{"api":true,"appearance":true,"documentation":true,"domain":false,"jwt":true,"logs":true,"metricsSDK":false},"pages":{"not_found":null},"privacy":{"openapi":"admin","password":null,"view":"public"},"refactored":{"status":"enabled","migrated":"successful"},"seo":{"overwrite_title_tag":"disabled"},"plan":{"type":"startup2018","grace_period":{"enabled":false,"end_date":null},"trial":{"expired":false,"end_date":"2020-03-17T14:38:14.358Z"}},"reference":{"api_sdk_snippets":"enabled","defaults":"always_use","json_editor":"disabled","oauth_flows":"disabled","request_history":"enabled","response_examples":"collapsed","response_schemas":"collapsed","sdk_snippets":{"external":"disabled"}},"health_check":{"provider":"none","settings":{"manual":{"status":"down","url":null},"statuspage":{"id":null}}},"integrations":{"aws":{"readme_webhook_login":{"region":null,"external_id":null,"role_arn":null,"usage_plan_id":null}},"bing":{"verify":null},"google":{"analytics":null,"site_verification":null},"heap":{"id":null},"koala":{"key":null},"localize":{"key":null},"postman":{"key":null,"client_id":null,"client_secret":null},"recaptcha":{"site_key":null,"secret_key":null},"segment":{"key":null,"domain":null},"speakeasy":{"key":null},"stainless":{"key":null,"name":null},"typekit":{"key":null},"zendesk":{"subdomain":null},"intercom":{"app_id":null,"secure_mode":{"key":null,"email_only":false}}},"permissions":{"appearance":{"private_label":"disabled","custom_code":{"css":"disabled","html":"disabled","js":"disabled"}}},"appearance":{"brand":{"primary_color":"#3100BE","link_color":"#A3B902","theme":"system"},"changelog":{"layout":"collapsed","show_author":true,"show_exact_date":false},"markdown":{"callouts":{"icon_font":"emojis"}},"table_of_contents":"enabled","whats_next_label":null,"footer":{"readme_logo":"hide"},"logo":{"size":"large","dark_mode":{"uri":"/images/66e21f7faad094004498a762","url":"https://files.readme.io/d760334ef760b9850e03033ca3ee10065da4fc991edce662d0adabaaa502bf44-small-Logo.FER.White.Small.png","name":"d760334ef760b9850e03033ca3ee10065da4fc991edce662d0adabaaa502bf44-small-Logo.FER.White.Small.png","width":523,"height":80,"color":"#ffffff","links":{"original_url":"https://files.readme.io/6cf190bece7dc0371b785f67199f09f459b86ab7be06d734b43da8515bf73c31-Logo.FER.White.Small.png"}},"main":{"uri":"/images/66e21f780960780069648645","url":"https://files.readme.io/924b6fced0177b97a2333057d92c722284e1fc5994d2a87ad98aab9e5d9222fe-small-Logo.FER.Blue.Small.png","name":"924b6fced0177b97a2333057d92c722284e1fc5994d2a87ad98aab9e5d9222fe-small-Logo.FER.Blue.Small.png","width":523,"height":80,"color":"#dcdce4","links":{"original_url":"https://files.readme.io/5bebeb29e71174ae8ef3ef721b54658f2fde9ed63b6c9b7a1ba5dee0adf17ce5-Logo.FER.Blue.Small.png"}},"favicon":{"uri":"/images/66e21fb3ab0cd3000f012006","url":"https://files.readme.io/f752ff2af794a60817f805643e50eca9b6ece82ecabce5e1330b94a00972e7cb-small-ABTasty_Marque_Yellow_small.png","name":"f752ff2af794a60817f805643e50eca9b6ece82ecabce5e1330b94a00972e7cb-small-ABTasty_Marque_Yellow_small.png","width":35,"height":32,"color":"#d4fc04","links":{"original_url":"https://files.readme.io/cb34f6c05c74f4a3266c28591a27fb0115bf92ba95d1472c85a3bfa877456a18-ABTasty_Marque_Yellow_small.png"}}},"custom_code":{"css":null,"js":null,"html":{"header":"","home_footer":null,"page_footer":null}},"header":{"type":"solid","gradient_color":null,"link_style":"buttons","overlay":{"fill":"auto","type":"circuits","position":"top-left","image":{"uri":null,"url":null,"name":null,"width":null,"height":null,"color":null,"links":{"original_url":null}}}},"ai":{"dropdown":"enabled","options":{"chatgpt":"enabled","claude":"enabled","clipboard":"enabled","copilot":"enabled","view_as_markdown":"enabled"}},"navigation":{"first_page":"landing_page","left":[{"type":"link_url","title":"Developer Documentation","url":"https://docs.developers.flagship.io/","custom_page":null}],"logo_link":"landing_page","page_icons":"enabled","right":[{"type":"search_box","title":null,"url":null,"custom_page":null},{"type":"user_controls","title":null,"url":null,"custom_page":null}],"sub_nav":[],"subheader_layout":"dropdown","version":"disabled","links":{"home":{"label":"Home","visibility":"enabled"},"graphql":{"label":"GraphQL","visibility":"disabled"},"guides":{"label":"Guides","alias":null,"visibility":"enabled"},"reference":{"label":"API Reference","alias":null,"visibility":"enabled"},"recipes":{"label":"Recipes","alias":null,"visibility":"disabled"},"changelog":{"label":"Changelog","alias":null,"visibility":"disabled"},"discussions":{"label":"Discussions","alias":null,"visibility":"disabled"}}}}}},"version":{"_id":"61127b93152a69007f6f75ee","version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["61127b93152a69007f6f75ef","61127b93152a69007f6f75f0","61127b93152a69007f6f75f1","61167ebb4ffec7006c3bf3d7","617a75a9582fae0100031dcf","6266521a411bce0080258339","630c707cce745900524cc769","6310d692b9f5840027490f73","6310d6f1be9c8f0c90d7108d","6310d71126a47c0084480c31","6310d73268005608a5f88ae3","6310d76d64b05a009668621d","6310d7880db1780013144da0","63232099e50bcd003fba5830","632320b7a3ed67005851f379","63232b9160ed7a04b14d59ef","632330f66e1d9c0bbfdbde4d","632356b0a5217f0092efd148","63288e26fffa4100658b1fd7","6329b49ea2f170000f651b9b","6376bf2f127d99000316ffe7","63886d7f8c6237000fb18bd0","63886f1f2d3b0600333f932b","638f4793a84bf400948f699a","63ad6d5ceca94e0038f04840","63ad7013dd9ca6000f9cccca","63adbb18068308000f3dd078","63adbc370ceca3007f62d6dd","63adbfea6921f50035421fbf","63adc5c6238ed904f03ccdae","63b2eda7cd178800586136fc","63b3005c43e0a3073bb71707","63b3035419df1a01bc9c5d59","63b30c3419df1a01bc9cfe21","63b30c5bb27a5f001643f6c3","63b3f025231ccd006d0ce90c","63b3fc8c54e4910038edac11","63da3a3a8523cc0058debdad","6400b814e6b6dc036e36d32d","6596c2727559eb00478048a4"],"project":"5e4aa55643caba00730ba9bd","releaseDate":"2021-08-10T13:13:55.093Z","createdAt":"2021-08-10T13:13:55.093Z","__v":0,"updatedAt":"2024-01-04T14:36:34.707Z","pdfStatus":"","apiRegistries":[{"name":"flagship-decision-api","url":"esno3kl2ef2rau"},{"name":"flagship-remote-control-api","url":"499rumw19lfi0azbt"},{"name":"auth-server","url":"53z41l88y2kpj"}]}},"is404":false,"isDetachedProductionSite":false,"lang":"en","langFull":"Default","reqUrl":"/docs/avoid-flickering-with-nextjs-ssr","version":{"_id":"61127b93152a69007f6f75ee","version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["61127b93152a69007f6f75ef","61127b93152a69007f6f75f0","61127b93152a69007f6f75f1","61167ebb4ffec7006c3bf3d7","617a75a9582fae0100031dcf","6266521a411bce0080258339","630c707cce745900524cc769","6310d692b9f5840027490f73","6310d6f1be9c8f0c90d7108d","6310d71126a47c0084480c31","6310d73268005608a5f88ae3","6310d76d64b05a009668621d","6310d7880db1780013144da0","63232099e50bcd003fba5830","632320b7a3ed67005851f379","63232b9160ed7a04b14d59ef","632330f66e1d9c0bbfdbde4d","632356b0a5217f0092efd148","63288e26fffa4100658b1fd7","6329b49ea2f170000f651b9b","6376bf2f127d99000316ffe7","63886d7f8c6237000fb18bd0","63886f1f2d3b0600333f932b","638f4793a84bf400948f699a","63ad6d5ceca94e0038f04840","63ad7013dd9ca6000f9cccca","63adbb18068308000f3dd078","63adbc370ceca3007f62d6dd","63adbfea6921f50035421fbf","63adc5c6238ed904f03ccdae","63b2eda7cd178800586136fc","63b3005c43e0a3073bb71707","63b3035419df1a01bc9c5d59","63b30c3419df1a01bc9cfe21","63b30c5bb27a5f001643f6c3","63b3f025231ccd006d0ce90c","63b3fc8c54e4910038edac11","63da3a3a8523cc0058debdad","6400b814e6b6dc036e36d32d","6596c2727559eb00478048a4"],"project":"5e4aa55643caba00730ba9bd","releaseDate":"2021-08-10T13:13:55.093Z","createdAt":"2021-08-10T13:13:55.093Z","__v":0,"updatedAt":"2024-01-04T14:36:34.707Z","pdfStatus":"","apiRegistries":[{"name":"flagship-decision-api","url":"esno3kl2ef2rau"},{"name":"flagship-remote-control-api","url":"499rumw19lfi0azbt"},{"name":"auth-server","url":"53z41l88y2kpj"}]},"gitVersion":{"base":null,"display_name":null,"name":"1.0","release_stage":"release","source":"readme","state":"current","updated_at":"2025-06-10T17:13:30.000Z","uri":"/branches/1.0","privacy":{"view":"default"}},"versions":{"total":7,"page":1,"per_page":100,"paging":{"next":null,"previous":null,"first":"/flagship/api-next/v2/branches?page=1&per_page=100","last":null},"data":[{"base":"1.0","display_name":"0.0.0-preprod","name":"0.0.0-preprod","release_stage":"release","source":"readme","state":"current","updated_at":"2025-01-29T16:01:34.974Z","uri":"/branches/0.0.0-preprod","privacy":{"view":"hidden"}},{"base":"1.0","display_name":"Flagship Reference","name":"0.1.1-doc","release_stage":"release","source":"readme","state":"current","updated_at":"2025-01-31T15:12:30.626Z","uri":"/branches/0.1.1-doc","privacy":{"view":"hidden"}},{"base":null,"display_name":null,"name":"1.0","release_stage":"release","source":"readme","state":"current","updated_at":"2025-06-10T17:13:30.354Z","uri":"/branches/1.0","privacy":{"view":"default"}},{"base":"1.0","display_name":null,"name":"1.0-flutter","release_stage":"release","source":"readme","state":"current","updated_at":"2025-04-07T10:21:28.603Z","uri":"/branches/1.0-flutter","privacy":{"view":"hidden"}},{"base":"1.0","display_name":null,"name":"1.0-js-fix","release_stage":"release","source":"readme","state":"current","updated_at":"2025-03-28T20:20:54.314Z","uri":"/branches/1.0-js-fix","privacy":{"view":"hidden"}},{"base":"1.0","display_name":null,"name":"1.0-codebase-analyzer-vscode-guide","release_stage":"release","source":"readme","state":"current","updated_at":"2025-04-18T12:43:24.020Z","uri":"/branches/1.0-codebase-analyzer-vscode-guide","privacy":{"view":"hidden"}},{"base":"1.0","display_name":null,"name":"1.0-FixFlutter","release_stage":"release","source":"readme","state":"current","updated_at":"2025-04-29T13:43:48.182Z","uri":"/branches/1.0-FixFlutter","privacy":{"view":"hidden"}}]}}">