My feature is enabled
} - { !decision.enabled &&My feature is disabled
} - { decision.variationKey === 'control-variation' &&Current Variation
} - { decision.variationKey === 'experimental-variation' &&Better Variation
} + {decision.enabled &&My feature is enabled
} + {!decision.enabled &&My feature is disabled
} + {decision.variationKey === 'control-variation' &&Current Variation
} + {decision.variationKey === 'experimental-variation' &&Better Variation
} > ); @@ -332,23 +330,22 @@ function MyComponent() { ``` ### Tracking + Use the built-in `useTrackEvent` hook to access the `track` method of optimizely instance ```jsx import { useTrackEvent } from '@optimizely/react-sdk'; function SignupButton() { - const [track, clientReady, didTimeout] = useTrackEvent() + const [track, clientReady, didTimeout] = useTrackEvent(); const handleClick = () => { - if(clientReady) { - track('signup-clicked') + if (clientReady) { + track('signup-clicked'); } - } + }; - return ( - - ) + return ; } ``` @@ -411,70 +408,99 @@ To rollout or experiment on a feature by user rather than by random percentage, ## Server Side Rendering -Right now server side rendering is possible with a few caveats. +The React SDK supports server-side rendering (SSR). To generate synchronous decisions during SSR, you must pre-fetch the datafile and pass it to `createInstance`. Using `sdkKey` alone is not supported for SSR because it requires an asynchronous network call. -**Caveats** +### Setup -1. You must download the datafile manually and pass in via the `datafile` option. Can not use `sdkKey` to automatically download. +Fetch the datafile on the server, create an Optimizely instance, and wrap your app with `Feature enabled
:Feature disabled
; +} -```jsx -The feature is enabled
} - { !decision.enabled &&The feature is not enabled
} - { decision.variationKey === 'variation1' &&Variation 1
} - { decision.variationKey === 'variation2' &&Variation 2
} -