Vercel Ship 2025 workshop: Exploring Partial Prerendering in Next.js (BigCommerce)

[Music] [Applause] Welcome. Um, first off, I'm a millennial and they say things don't happen if you don't take pictures. So, it's late in the day. You mind just standing up? Yeah. Bring a little bit of energy. Act like you're having fun even though you haven't yet. One picture. Cool. Oh, whoa. While while

you're standing, this is the beauty of being on stage is I get to control when you sit back down. Uh, one of the challenges with doing a workshop with X number of people in a room is you don't know like experience levels. It's really hard to build something that's tailored towards everybody in the room. So, just like kind of a quick show of hands, how many people have experience with uh streaming in React? Oh, we're going to learn a ton today. Cool. Uh, next step of that, which I imagine is even less than, is how many people have experience in PPR?

Cool. All right. The beautiful thing when people don't raise their hand is that makes my job a lot easier because I just have to know barely more than you do to pretend like I know a lot or at least you think I do. So, what we're going to do, uh, there's a QR code on the on the screen. If you formally registered for this, you should have got an email for a GitHub repository, which is what this QR code goes to. in this GitHub repository. If you're following along hands-on, the expectation is that you have the repository downloaded locally. You have packages installed.

You run npm rundeendev to have this running locally. And what we're going to do is kind of iterate on an idea that I'll explain in a second to kind of build out a not so hypothetical scenario that we will walk through. Uh if you don't already have the GitHub repository downloaded, I don't know if you have any challenges, Wi-Fi or not. Uh if you look inside of the readme though, you will see that there are I would say fairly detailed instructions. It's basically a long blog post that kind of gives context for what we're doing and why as

well as code snippets that we're going to copy and paste in. And then if you're doing this on your machine, you'll be able to see the impact of that. I will also be showing all of that up on the screen as well. So you have the ability to do this hands-on copy and paste yourself. You can also kind of sit back and watch what I'm doing up here. Whatever works for you. That sound good? Oh yeah, you can sit. Thanks for the remind. It's funny. Half the room had decided they were going to go ahead and sit regardless, which I highly respect. So, uh, my name is James Qquick. I, uh,

run the developer experience team at a company called Big Commerce. We've got a booth right around the corner. The big CTA was to tell you to come talk to us at the booth. There's like 30 minutes left in the conference after this, so like find us at the happy hour, I guess. Uh but one of the interesting things is when I started last September, I specifically started working for a company called Makes Swiftift. They're a visual website builder that integrates with Nex.js uh who had already been acquired by Bitcommerce. And one of the things that they were building was this UI library called Vibes. Uh there's a couple links in here to things that I'm

talking about including Vibes that you can go check out. And the interesting thing with Vibes, it's it's kind of a copy and paste UI component library. Something similar to Shad CN. How many people have have seen or heard or used Shaden? probably a lot of hands. The the thing we wanted to do differently though is go ahead and take care of all the things that you would need to do in a Nex.js world with your components. The biggest aspect of that is handling modern Nex.js/react features by being

able to use React Suspense, doing data streaming, showing loading skeletons, etc. to make the developer experience as easy as possible as you copy and paste these components into your own code. So what I want to walk you through is part of the learning journey that our engineering team went through and actually building that out and some of the things that we've learned to support all those features and what we consider our best practices and talk about PPR along the way.