Next.js Guide - Pages router

Modern web frameworks offer different rendering strategies to improve the user experience and performance of your web applications. This guide will show you how to configure FeaturesFlow in Next.js, server-side, client-side or a mix of the two.

Server-side rendering

Next.js is a React framework that allows you to render your pages on the server-side. This is a great way to improve the performance of your web application by reducing the time it takes to load the page.

To truly leverage feature flags within server rendered environment, you can use the getServerSideProps function to fetch the feature flags from FeaturesFlow on server-side and pass them to your components on client side.

Here's an example of how you can do this:

pages/server-side.tsx

export default function ServerSide({ treatment } : { treatment: string}) {
 
    return (
        <main>
            {treatment === 'VariantA' && <VariantA />}
 
            {treatment === 'VariantB' && <VariantB />}
        </main>
    )
}
export async function getServerSideProps() {
 
    const ffConfig: FeaturesFlowConfig = {
        authenticationKey: 'YOUR_AUTHENTICATION_KEY',
        trafficType: 'session',
        identifier: 'YOUR_USER_ID',
    }
 
    const client = new FeaturesFlowClient()
 
    await client.init(ffConfig)
 
    const treatment = client.getFeatureToggle('demo-feature-toggle')
 
    return { props: { treatment: treatment } }
}

In this example, we are fetching the feature flag demo-feature-toggle from FeaturesFlow on the server-side using the getServerSideProps function. We then pass the treatment to the page as a prop.

Note

As you can see in the example above, this technique requires you to use the treatment at page level. This is rarely the case in real-world applications. In most cases, you will want to use the treatment in a component. To do this, read the section below about server-side-to-client-side rendering.

Server-side-to-client-side rendering

In most cases, you will want to use the treatment in a component rather than at the page level.

pages/server-side-to-client-side.tsx

import { getFeatures, FeaturesFlowConfig as BaseFeaturesFlowConfig } from '@featuresflow/sdk-base'
import React from 'react'
import { MyComponent } from "@/components/my-component";
import { FeaturesFlowProvider, FeaturesFlowConfig } from '@featuresflow/sdk-react';
 
const ffConfig: BaseFeaturesFlowConfig = {
    authenticationKey: 'YOUR_AUTHENTICATION_KEY',
    identifier: 'YOUR_USER_ID',
    trafficType: 'session',
}
 
interface Props {
    treatments: Record<string, string>
}
 
export default function ServerSideToClientSide(props: Props) {
    const { treatments } = props
 
    const ffConfigExtended: FeaturesFlowConfig= {
        authenticationKey: 'YOUR_AUTHENTICATION_KEY',
        identifier: 'YOUR_USER_ID',
        options: {
            prefetchedFeatures: treatments
        }
    }
 
    return (
        <FeaturesFlowProvider config={ffConfigExtended}>
            <MyComponent/>
        </FeaturesFlowProvider>
    );
}
 
export async function getServerSideProps() {
 
    const res = await getFeatures(ffConfig)
 
    const treatments = res.status === 'success' ? res.features : {}
 
    return { props: { treatments:  treatments} }
}

In this example, we are fetching the feature flags from FeaturesFlow on the server-side using the getServerSideProps function. We then pass the treatments to the page as a prop. We then pass the treatments to the FeaturesFlowProvider component as a prop.

Now, lets take a look on how can you retrive the treatment in your component:

components/my-component.tsx

import React from 'react'
import { VariantA } from "@/components/VariantA";
import { VariantB } from "@/components/VariantB";
import { useFeatureToggle } from '@featuresflow/sdk-react';
 
export const MyComponent = () => {
    const treatment = useFeatureToggle('demo-feature-toggle')
 
 
    return (
        <>
            {treatment === 'VariantA' ?  <VariantA /> : <VariantB />}
        </>
    )
}

To retrieve the treatment in your component, you can use the useFeatureToggle hook provided by the FeaturesFlow SDK. This hook will return the treatment for the feature flag demo-feature-toggle.

Dependency notice

The @featuresflow/sdk-react package is a wrapper around the @featuresflow/sdk-base package. Make sure to install both packages in your project. It won't increase your bundle size as the @featuresflow/sdk-react package is just a wrapper around the @featuresflow/sdk-base package.

Client-side rendering

Client-side rendering should only be used in special cases. It often leads to layout shift which are not optimal for user experience and page performance metrics. We recommend only using that strategy when the content that varies depending on feature flag treatment is not displayed in the initial UI. An example of such case whould be a modal that is displayed only after a user interaction or content displayed below the fold.

pages/client-side.tsx

import { MyComponent } from "@/components/my-component";
import { FeaturesFlowProvider } from "@featuresflow/sdk-react";
 
const ffConfig= {
    authenticationKey: 'YOUR_AUTHENTICATION_KEY',
    identifier: 'YOUR_USER_ID',
}
 
export default function ClientSide() {
 
    return (
        <FeaturesFlowProvider config={ffConfig}>
            <MyComponent />
        </FeaturesFlowProvider>
    )
}

In this example, we are using the FeaturesFlowProvider component to wrap our component. It will automatically fetch the feature flags and render your content accordingly. This will allow us to use the useFeatureToggle hook to retrieve the treatment for the feature flag demo-feature-toggle.

Get started with FeaturesFlow

Create a free account and start using FeaturesFlow today.