Zero Bundle Feature Flags in Next.js

Hello everyone,

Building Feature Flag in JS has multiple challenges, such as increasing bundle size for both treatments, having visual flashes and having to be calculated on run time.

These challenges come from the way we bundle our applications, currently we cannot have different bundle for each user, but with React Server Components we can come close,

I wanted to share how I am implementing 0 extra bundle feature flags using Next.js 13 app dir,

Using React Server Components we can determine feature flags on request and change our component tree on demand.

for example, I am building a new route for this blog, I want to test it in prod env but don't want to open to everyone yet, this is how I would do it with RSC:

export default async function GuestbookLayout(props: {
  children: React.ReactNode;
}) {
  const isAdmin = await genCapability('is_admin');
 
  if (!isAdmin) {
    return notFound();
  }
 
  return (
    <div>
      <TypographyH2>Blog</TypographyH2>
      <div className="py-[2px]">{props.children}</div>
    </div>
  );
}

genCapability checks for auth and then gets the current capabilities for the user, if this is false, we can return a notFound with the Next.js function, otherwise we return the new page!!

the downside is that this only works for sever components, not client ones, so we have some limitations, such as using feature flags on client components,

an alternative would be to hydrate a context with the current user capability,

export default async function ServerProviders(props: Props) {
  const data = await fetchCapabilities();
 
  return (
    <Providers capabilities={data.capabilities}>{props.children}</Providers>
  );
}

this will prefill the capabilities beforehand, removing any rendering flashes and improving the UX, this could be used for smaller changes, like the color of a button, since having two big different treatments could result in higher bundle sizes.

Scaling

I am using this for only my blog, which is pretty small at the time of this writing, I would like to see how this scale over time and if I could build some tooling around it.

Experimentation

The biggest pro for A/B testing feature flags is getting to experiment product changes around your site and see the impact new features bring.

This is out of scope for the initial implementation, since the MAU for my blog is currently 0, so experimentation would be very hard to perform lol.