Supper Club × Lee Robinson on React Suspense, Server Components

Welcome to Syntax Supper Club. Today, we have an amazing guest, Lee Robinson of Next. Js in Vercel.

And we're gonna be talking all things all kinds of stuff, React, Next. Js, Vercel stuff, All all kinds of stuff in that world. My name is Scott Tolinski. I'm a developer from Denver, Colorado. And with me, as always, is Wes Bos.

Hey, everybody. I'm in suspense of what this episode will contain.

Classic joke, Wes. Classic joke. He never gets old. Yeah.

This episode is sponsored by 2 amazing companies, Gatsby, which is the fastest front end for the headless web, And LightStep incident response, intelligent on call scheduling and escalation.

Lee, thank you so much for coming on. How you doing? I am doing excellent. Thank you both for having me.

Longtime listener, first time joiner. Yeah. Good.

Oh, good. Good. I'm glad that you, You you listen every now and then. That's great. Do you wanna give us a quick intro of who you are, what you're from, what you do? Absolutely.

Yeah. I'm Lee Robinson. I am the VP of Developer experience at Vercel, and I lead our DevRel and documentation teams.

And really just try to create a platform that's Fast, enjoyable, and easy for developers to take some code and put it on the Internet somewhere.

Oh, it's good. We we talked about we were talking about, like, what was who was it? On the a couple of podcasts ago, we had somebody on. We're talking about just, like, enjoying Using code and the Vercel stuff and the Next. Js stuff just started kept popping up over and over again because they're just like, My developer experience at Vercel is great, so thank you for that.

Yeah. Yeah. I I know the the syntax Site uses Next in Vercel, so we're happy to support y'all as well there too. Yeah. It's, it's funny. Like, we I think we built the Syntax site on Next one,

like, way back. Like, 4, 5 years ago.

And, we had some help over the years having it upgraded.

I think we there was, like, a major upgrade when but after, server side rendering was rolled out, and We got some help on that. And then the last, like, 4 or 5 next JS versions have been just a piece of cake to update almost Almost no issues. Just follow the change log and and update the things. I was telling, Lee before this, Of course, Scott showed up is that we had 1 issue on the syntax website a couple months ago where, I was loading the show notes for literally every single show On the on the table. It was nice and fast. Well, we also had, like, 30 shows too, so we didn't notice it for a long time. We had 0 shows at first, And and it was so nice and fast and you just click it.

And then I I look at Versailles, like, sponsors the hosting of the site. So I I had never, like, looked at the bill, but then I had one day I popped in and looked at the bill and it was like, like $60 or something like that. And I was like, oh, man, like, We're using a ton of bandwidth and, like, let alone the money. But I don't want to be be putting Vercel out of business, but a little. It was more like people having to actually download that. So we were loading.

I forget what it was. It was megs and megs of just text. And I thought, like, How? It's funny. A text is a perf issue. I had a I now we now load them on demand, but I thought that was a funny little, tidbit to share.

Let's start talking about, about suspense. I I think that's one thing that the audience would like to hear about. So suspense And React in general, can you explain to our audience what what is suspense, and and what is it gonna look like in React as well as Next. Js? The way that I like to think about suspense,

Especially for folks who've written Node. Js code before, or, you know, browser code that's using async await As you understand this model of I have some asynchronous code, maybe it's a fetch to some API or a request to go get paid out of my database, and I wanna wait for that code to finish and then use that value somewhere else in my application.

And the interesting thing about suspense is it brings that mental model to your React code base.

So for for experienced React developers or or folks who've built apps with a, you know, a client side fetch side of a a useEffect, which Has some nuance to it.

They might have fell into a state where they are Rendering kind of a a placeholder or a loading state. And then when that request resolves, then it swaps in The state updates, and it shows the new value. The really nice thing about suspense is it's more of a a built in primitive to express asynchronous code in the React ecosystem.

And with React 18 and kind of the future direction of React, It's really unlocking some interesting and unique possibilities.

My favorite one and also most recently discovered one, just a little little sneak, feature in React 18. I didn't really realize how powerful it was until I actually used it, which is Selective hydration.

So you wrap a component or a, you know, a component tree with a suspense boundary, And you can, you know, progressively hydrate that part of the page as you scroll to it. So for example, on our landing page on the Next. Js landing page, actually, you know, we were loading the JavaScript to hydrate the entire page. And I was looking at the, the lighthouse run or, like, a performance run, and I saw there's an opportunity. Oh, you can improve importance by, you know, Including less JavaScript on the initial page load. And all I had to do was just put a suspense boundary around the components that I wanted to defer The hydration four. And it was wild. I just didn't realize how easy it was to enable that with React 18. And it's funny because it's easy for the end user, but that was, You know, multiple years of research and development for Right. For React to get right. So so to give the audience a bit of,

an insight there. Hydration, you could think about it. So hydration isn't a problem necessarily with normal client side render sites. Right? Because The JavaScript loads the the site, and that's the JavaScript. Right? But with when you have a server rendered site, you're using JavaScript to both render the server site as well as Interactivity in the UI. So you render the site, then hydration, comes about. And, basically, it's readding that JavaScript client side To hydrate the DOM with the the the client side JavaScript using the same, essentially, the same React code, which, before Next. Js came about was a tremendous pain in React.

In fact, I always often said that, like, Next is really the the way to do server side rendered because the hydration step can just be kind of a pain if you're doing it your own custom way.

So so so selective hydration,

the big benefit there is just reduced JavaScript load for the user. Right? Reduced initial JavaScript load. Yeah. Specifically, the metric to look at is the time to interactive. So by shipping less JavaScript, you're able to make that page interactive more quickly.

And to your point, when you're server rendering and you're prerendering some HTML from the server, You wait for that JavaScript to load or hydrate so you can actually click on some stuff.

It's better for performance, better for your your customers, your visitors If they can, you know, immediately click somewhere else on the page if they wanna go somewhere, they don't have to wait for

some JavaScript to be loaded and have A lower time to interactive. Oh, that's cool. So, like, the way I'm understanding that is, like, let's say you have, part of your your website that you don't necessarily care to have the client side JavaScript to be rendered because Could it just be like a static component like a nev like a like a menu or something like that? Is that where you'd pop a a suspense component around? That's not obviously not Just what suspense is for, but is that what you're explaining here? So in this instance, the

the progressive hydration or or selective hydration, I'm not sure what the actual specific, description word is there, but you're you're deferring the loading of the the JavaScript there. It's not necessarily that you'll have no JavaScript.

It's actually you know that you will have JavaScript.

You're just saying it's not important or as important for the initial page load. So in the context of, marketing page, it's like, well, these these sections down towards the bottom, they're not in the initial paint.

So let's just help improve the performance and only load that as we kinda get it into the viewport. Now there is a future improvement to make there that Next. Js can help Unlock with server components, which is for this section, for example, this is just HTML.

There's no JavaScript. Maybe we don't even need to load JavaScript there. Anything at all.

Interesting.

And that that's very similar to The defer attribute in on a script tag as well. Right? Exactly. Exactly.

That makes sense. You're saying, okay. Like, I'd like to load this thing, but it's not, Like, maybe it's analytics or, something that is not that important to get the thing running, and we shouldn't hold everything up, while we download this little bit of JavaScript it's funny because, like so there's this big company in Canada called Rogers, and they have, this website, literally go to rogers.com and watch it in your browser. Just do this right now. And I'm going to see your face.

Oh, no.

Oh, no.

Immediately bad.

So they throw up.

I think it's a 10 second loader On every single page. No way. I dug into it, and it's literally a set time out. Set time It is. And so it's not even they're not they're not waiting for something to load. They're literally throwing up a div. What what what? Yeah. Like, this is this is probably one of the biggest, if not the biggest company in all of Canada.

And they throw a 10 second loader, black or white out the whole page before you can go to any other page on it. And,

brutal. Brutal. Brutal. And it's just like Brutal. First of all, I would love to be a fly on the wall for that decision. Like, who who decided, you know what? Just just 10 seconds. Just throw it up there.

It's Oh my god. That that got passed.

And and, like, I'm probably offending people because I have lots of friends that work there. I need to maybe reach out to them and be like, like, what? What happened? What happened? Or that? Yeah. Are you okay? And, like, probably what happened is there's probably, like, 18 CMSs that are strung together.

It's all being loaded on the client because nobody has access to these CMSs. They're just writing front end code, so they're probably fetching it on page load. Yep. And they're they had issues with that. And the funny thing is, if you if you hide that div, the the site loads pretty fast.

Less than 10 seconds.

Yeah. To your point, Wesley, you you I think you might you know, with the CMSs, I for a, a a car company that may not be named, That they had 90 different CMSs being used over their different markets.

90? 90 different Oh, wow. Based on all their different markets. Because when we were doing, when well, when maybe not myself, but somebody who may or may not be me was doing, work work for them, That you had to account for the developers in those 90 different markets to be able to implement the components you were building in their CMSs. And it was just like, what? Wait. What?

You know you know, sometimes where people will post a screenshot of, like, an unsubscribe link that says, please allow, like, 2 months For us to completely unsubscribe you. And they're like, well, how could that possible be possible? I was like, you have no idea.

The s h I t that's going down inside of these large companies. There's probably literally 2 people that get emailed the spreadsheet of people that need to be unsubscribed, and some poor Sol has to go take it off of, like, 90 different CMSs.

Yeah. Right. Right. Totally get.

Oh, another one. Okay. I guess I gotta go do it again. Okay? Yeah. Let me walk down the hall and unsubscribe

Scott.

This episode is sponsored today by LightStep incident response. The all in one incident response platform for DevOps and SREs.

LightStep instant response is built on the ServiceNow platform, which is used by over 6,000