Vercel Ship 2025 workshop: Feature flag success with Statsig (Dominik Ferber and Joe Zeng)

[Music] [Applause] So hello everyone. Uh I'm Dominic and uh I work on everything feature flex and experimentation at Vasel. And today I'm joined by Joe from Static. Um and we're going to do the workshop about about the flex SDK. Um and also how to use the flex SDK with the static provider. Um, while I'm still introducing everything, maybe you can already go to this uh website. This is a little companion

application that we've built and uh it's going to help you just follow along with the live demo and live coding. And Joe and Thomas here, they will also walk through the audience and in case you get stuck, just raise your hand and they can come and uh just help you so you don't get get stuck. If you go to this website, um you will be greeted by this which uh you can click on deploy which will bring you to Vasel

and then in here you can connect it to your own um GitHub repository. If you can just keep the name. Um, click on create and okay, obviously I practiced. Um, we click on create. And now it's going to suggest us to create an environment variable. This is a secret that we'll use later. Um, I recommend not changing it because it needs to have a specific length to work. And we generate this for you automatically. So you just click on

deploy. And while that's deploying, um, we can go ahead with the rest of the setup in the quick start. Um, and the next step would be to get clone. Um, and remember to replace your username in here. I make that a bit bigger. And then you can follow the rest of these onboarding steps. And in the meantime, because we don't have so much time today, I'm going to um

talk a little bit about what exactly uh this talk is about. So I want to show you something that um I see a lot on the web which is uh when you load a page the page loads and suddenly your whole layout shifts down because there's an experiment uh that's running on the page and it's a really bad experience um for anybody visiting the website and especially if you like want to buy something and then the shift happens so you don't hit the right button. Um and

the reason something like this happens a lot is because of how feature flags are used um in the client side. So when you're when you have your browser and you the browser requests the page from the server. The server responds with the page. Then in the browser the provider SDK starts loading and it contacts the feature flag or experiment provider to find out what the user should see and then the uh providers SDK realizes hey I should actually be showing um this

experiment and then the experiment pops up and that's what leads to the layout shift uh or the chank when the page is loading. Um to eliminate this problem, we created the flex SDK that works with NexJS and SWELKit. And I'm going to show you today how it works uh with NexJS. And here's a small preview of uh kind of the experience that we will have at the end of the demo. Um so this is the landing page of the Flex SDK. And I can actually come in here and I can change the headline for example and I can also

disable the banner here at the top. And you will see that if I reload the page now, I don't get any layout shift. It's just immediately correct. And you would think, uh, hey Dominic, that's so easy. That's just serverside rendering. Like, I can do that. Um, but I want to show you that when we open the network tab, let's make this a lot bigger. We're actually hitting the VEL CDN cache. Uh, which means that this page is served statically uh across the globe. Uh, which is also why it's extremely fast. We don't need to go to the single