Discussion on: Feature flags in React

[Jannis Jorre]

This seems like an awesome product that I'll definitely try out as soon as I have some time!🤯

How does it handle Server-Side-Rendering btw? Does it work well with it?😇

[Asa Schachar]

Great question. It does work with Server-Side-Rendering with a few caveats. Mainly, the installation instructions are different. They require passing a datafile variable directly to the SDK rather than relying on the SDK key during initialization.

The datafile is a configuration file that defines the state of all of your feature flags and rollouts.

Using a datafile rather than an SDK Key:

import { OptimizelyProvider } from '@optimizely/react-sdk'
import * as optimizelySDK from '@optimizely/js-web-sdk'

const optimizely = optimizelySDK.createInstance({
  datafile: optimizelyDatafile, // Note: This is a datafile variable rather than an SDK Key
})

class App extends React.Component {
  render() {
    return (
      <OptimizelyProvider
        optimizely={optimizely}
        userId={'user123'}
        userAttributes={{ customerId: 123 }}
      >
        <HomePage />
      </OptimizelyProvider>
    )
  }
}

If you are running an Express server, you can follow my related post on how to do feature flags in a JavaScript backend using Express, which will show you how to get the datafile variable to pass to the React SDK.

If there's enough interest, I can create a similar style post specifically for server-side rendered React. Let me know!