|
| 1 | +# LaunchDarkly React Universal SDK |
| 2 | + |
| 3 | +[![NPM][react-universal-sdk-npm-badge]][react-universal-sdk-npm-link] |
| 4 | +[![Actions Status][react-universal-sdk-ci-badge]][react-universal-sdk-ci] |
| 5 | +[![Documentation][react-universal-sdk-ghp-badge]][react-universal-sdk-ghp-link] |
| 6 | +[![NPM][react-universal-sdk-dm-badge]][react-universal-sdk-npm-link] |
| 7 | +[![NPM][react-universal-sdk-dt-badge]][react-universal-sdk-npm-link] |
| 8 | + |
| 9 | +> [!CAUTION] |
| 10 | +> This library is a beta version and should not be considered ready for production use while this message is visible. |
| 11 | +
|
| 12 | +> **An idiomatic LaunchDarkly SDK which supports RSC, server side rendering and bootstrapping** :clap: |
| 13 | +
|
| 14 | +This SDK supports: |
| 15 | + |
| 16 | +- React Server Components |
| 17 | +- Server side rendering |
| 18 | +- Bootstrapping |
| 19 | + |
| 20 | +## Installation |
| 21 | + |
| 22 | +```shell |
| 23 | +# npm |
| 24 | +npm i @launchdarkly/react-universal-sdk --save-dev |
| 25 | + |
| 26 | +# yarn |
| 27 | +yarn add -D @launchdarkly/react-universal-sdk |
| 28 | +``` |
| 29 | + |
| 30 | +### Server API |
| 31 | + |
| 32 | +- `initNodeSdk` - Initializes the Node SDK on server startup using the [instrumentation hook](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation) |
| 33 | + |
| 34 | +- `getBootstrap` - Returns a json suitable for bootstrapping the js sdk. |
| 35 | + |
| 36 | +- `useLDClientRsc` - Use this to get an ldClient for Server Components. |
| 37 | + |
| 38 | +### Client API |
| 39 | + |
| 40 | +- `LDProvider` - The react context provider. |
| 41 | + |
| 42 | +- `useLDClient` - Use this to get an ldClient for Client Components. |
| 43 | + |
| 44 | +## Usage |
| 45 | + |
| 46 | +1. Enable [instrumentationHook](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation) in `next.config.mjs`: |
| 47 | + |
| 48 | +```ts |
| 49 | +/** @type {import('next').NextConfig} */ |
| 50 | +const nextConfig = { |
| 51 | + experimental: { instrumentationHook: true }, |
| 52 | +}; |
| 53 | + |
| 54 | +export default nextConfig; |
| 55 | +``` |
| 56 | + |
| 57 | +2. Create a new file `instrumentation.ts` at the root of your project. This will initialize the Node Server SDK. |
| 58 | + |
| 59 | +```ts |
| 60 | +import { initNodeSdk } from '@/ld/server'; |
| 61 | + |
| 62 | +export async function register() { |
| 63 | + await initNodeSdk(); |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +3. In your root layout component, render the `LDProvider` using your `LDContext` and `bootstrap`: |
| 68 | + |
| 69 | +```tsx |
| 70 | +export default async function RootLayout({ |
| 71 | + children, |
| 72 | +}: Readonly<{ |
| 73 | + children: ReactNode; |
| 74 | +}>) { |
| 75 | + // You must supply an LDContext. For example, here getLDContext |
| 76 | + // inspects cookies and defaults to anonymous. |
| 77 | + const context = getLDContext(); |
| 78 | + |
| 79 | + // A bootstrap is required to initialize LDProvider. |
| 80 | + const bootstrap = await getBootstrap(context); |
| 81 | + |
| 82 | + return ( |
| 83 | + <html lang="en"> |
| 84 | + <body className={inter.className}> |
| 85 | + <LDProvider context={context} options={{ bootstrap }}> |
| 86 | + {children} |
| 87 | + </LDProvider> |
| 88 | + </body> |
| 89 | + </html> |
| 90 | + ); |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +4. Server Components must use the async `useLDClientRsc` function: |
| 95 | + |
| 96 | +```tsx |
| 97 | +// You should use your own getLDContext function. |
| 98 | +import { getLDContext } from '@/app/utils'; |
| 99 | +import { useLDClientRsc } from '@/ld/server'; |
| 100 | + |
| 101 | +export default async function Page() { |
| 102 | + const ldc = await useLDClientRsc(getLDContext()); |
| 103 | + const flagValue = ldc.variation('dev-test-flag'); |
| 104 | + |
| 105 | + return ( |
| 106 | + <main className="flex min-h-screen flex-col items-center justify-between p-24"> |
| 107 | + Server Component: {flagValue.toString()} |
| 108 | + </main> |
| 109 | + ); |
| 110 | +} |
| 111 | +``` |
| 112 | + |
| 113 | +5. Client Components must use the `useLDClient` hook: |
| 114 | + |
| 115 | +```tsx |
| 116 | +'use client'; |
| 117 | + |
| 118 | +import { useLDClient } from '@/ld/client'; |
| 119 | + |
| 120 | +export default function LDButton() { |
| 121 | + const ldc = useLDClient(); |
| 122 | + const flagValue = ldc.variation('dev-test-flag'); |
| 123 | + |
| 124 | + return <p>Client Component: {flagValue.toString()}</p>; |
| 125 | +} |
| 126 | +``` |
| 127 | + |
| 128 | +You will see both components are rendered on the server (view source on your browser). However, only Client Components |
| 129 | +will respond to live changes. |
| 130 | + |
| 131 | +## Verifying SDK build provenance with the SLSA framework |
| 132 | + |
| 133 | +LaunchDarkly uses the [SLSA framework](https://slsa.dev/spec/v1.0/about) (Supply-chain Levels for Software Artifacts) to help developers make their supply chain more secure by ensuring the authenticity and build integrity of our published SDK packages. To learn more, see the [provenance guide](PROVENANCE.md). |
| 134 | + |
| 135 | +## About LaunchDarkly |
| 136 | + |
| 137 | +- LaunchDarkly is a continuous delivery platform that provides feature flags as a service and allows developers to iterate quickly and safely. We allow you to easily flag your features and manage them from the LaunchDarkly dashboard. With LaunchDarkly, you can: |
| 138 | + - Roll out a new feature to a subset of your users (like a group of users who opt-in to a beta tester group), gathering feedback and bug reports from real-world use cases. |
| 139 | + - Gradually roll out a feature to an increasing percentage of users, and track the effect that the feature has on key metrics (for instance, how likely is a user to complete a purchase if they have feature A versus feature B?). |
| 140 | + - Turn off a feature that you realize is causing performance problems in production, without needing to re-deploy, or even restart the application with a changed configuration file. |
| 141 | + - Grant access to certain features based on user attributes, like payment plan (eg: users on the ‘gold’ plan get access to more features than users in the ‘silver’ plan). |
| 142 | + - Disable parts of your application to facilitate maintenance, without taking everything offline. |
| 143 | +- LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read [our documentation](https://docs.launchdarkly.com/sdk) for a complete list. |
| 144 | +- Explore LaunchDarkly |
| 145 | + - [launchdarkly.com](https://www.launchdarkly.com/ 'LaunchDarkly Main Website') for more information |
| 146 | + - [docs.launchdarkly.com](https://docs.launchdarkly.com/ 'LaunchDarkly Documentation') for our documentation and SDK reference guides |
| 147 | + - [apidocs.launchdarkly.com](https://apidocs.launchdarkly.com/ 'LaunchDarkly API Documentation') for our API documentation |
| 148 | + - [blog.launchdarkly.com](https://blog.launchdarkly.com/ 'LaunchDarkly Blog Documentation') for the latest product updates |
| 149 | + |
| 150 | +[react-universal-sdk-ci-badge]: https://github.com/launchdarkly/js-core/actions/workflows/react-universal-sdk.yml/badge.svg |
| 151 | +[react-universal-sdk-ci]: https://github.com/launchdarkly/js-core/actions/workflows/react-universal-sdk.yml |
| 152 | +[react-universal-sdk-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/react-universal-sdk.svg?style=flat-square |
| 153 | +[react-universal-sdk-npm-link]: https://www.npmjs.com/package/@launchdarkly/react-universal-sdk |
| 154 | +[react-universal-sdk-ghp-badge]: https://img.shields.io/static/v1?label=GitHub+Pages&message=API+reference&color=00add8 |
| 155 | +[react-universal-sdk-ghp-link]: https://launchdarkly.github.io/js-core/packages/tooling/react-universal-sdk/docs/ |
| 156 | +[react-universal-sdk-dm-badge]: https://img.shields.io/npm/dm/@launchdarkly/react-universal-sdk.svg?style=flat-square |
| 157 | +[react-universal-sdk-dt-badge]: https://img.shields.io/npm/dt/@launchdarkly/react-universal-sdk.svg?style=flat-square |
0 commit comments