NextJs and SSR

Flagster can be use in a SSR environment like NextJs, Remix and other frameworks.

Usage

npm install flagster-react

Providers

Create a Providers component to wrap your app with the FlagsterProvider and pass the server state to the provider.

app/providers.tsx

"use client";
import {
	createFlagster,
	FlagsterProvider,
	FlagsterState,
} from "flagster-react";
import { FC, PropsWithChildren, useRef } from "react";
 
type Props = {
	state: FlagsterState;
};
 
export const Providers: FC<PropsWithChildren<Props>> = ({
	children,
	state,
}) => {
	const flagster = useRef(createFlagster());
	return (
		<FlagsterProvider flagster={flagster.current} serverState={state}>
			{children}
		</FlagsterProvider>
	);
};

Layout

In your layout component, you can use the Providers component to wrap your app.

app/layout.tsx

import { Providers } from "./Providers";
import { PropsWithChildren, use } from "react";
import { createFlagsterSSR } from "flagster-react/server";
import { cookies } from "next/headers";
 
export default function RootLayout({ children }: PropsWithChildren) {
	const state = use(getFlagsterState());
 
	return (
		<html lang="en">
			<Providers state={state}>
				<body>{children}</body>
			</Providers>
		</html>
	);
}
 
async function getFlagsterState() {
	const flagster = createFlagsterSSR();
	const cookieStore = await cookies();
	await flagster.init({
		environment: "019596b0-e11b-7816-ac94-c98a26e05ebb",
		identity: cookieStore.get("flagster_identity")?.value,
	});
	return flagster.getState();
}

Middleware

You can create a middleware to generate an identity for the user and store it in a cookie. That prevents the user from getting a new identity on every request.

identityGenerator generate for you a random identity for guest users. You can instead use user id as identity if user is authenticated.

middleware.ts

import { NextRequest, NextResponse } from "next/server";
import { identityGenerator } from "flagster-react/server";
 
const IDENTITY_KEY = "flagster_identity";
 
export async function middleware(req: NextRequest) {
	if (req.cookies.has(IDENTITY_KEY)) return NextResponse.next();
 
	const res = NextResponse.next();
	res.cookies.set(IDENTITY_KEY, identityGenerator.generate());
	return res;
}
 
export const config = { matcher: "/:path*" };

From that point the SDK usage is the same as the React SDK.

NextJs and SSR

Usage

Providers

Layout

Middleware

On this page