Feature flag strategies with static sites
The following examples explore the strategies described in Using feature flags on static sites. There are four examples on this page. Each example is a separate page in a Glitch app displayed in an iframe. To make best use of these examples, click on the refresh button on the upper right of each example to refresh the iframe in each box.
To see the effect of these strategies better, you can simulate a slow network connection using the Chrome Developer Tools network tools to simulate a slow network connection. Firefox has a similar tool.
Example 1: Render page first then initialize client
The following page renders the contents of the page in parallel to loading and initializing the LaunchDarkly SDK/client. You'll notice the header and body background colors change shortly after the LaunchDarkly client initializes. In most cases this is within 100-200ms. This delay is more pronounced when you have less bandwidth available. If you can accept a page that renders progressively rather than all at once, then this technique is best for you. It doesn't slow down the initial render, but your users may see some flickering due to asyncronous loading of parts of the page hidden behind feature flags.
Example 2: Delay rendering until initialized
In this strategy, we delay the full rendering of the page until the LaunchDarkly client is initialized. You'll notice a blank page during the 100-200ms delay while the client is being initialized, but then the page is rendered all at once when the client is ready. This technique works best on single page apps since you're guaranteed that all components on the page will be in the state you expect when rendered.
Example 3: Delayed rendering with placeholder
This next example is the same as EX2, but with a placeholder to simulate the actual content that will appear once the client is loaded. The benefits of this are the same as EX2, but with less time spent waiting on blank page. This is a technique popularized by Facebook.
Example 4: Delay rendering using the LD React SDK
This strategy is almost exactly like example 2, but utilizes the React SDK's asyncWithLDProvider function to guarantee that flags are available before your components mount.