Supper Club × Lee Robinson on React Suspense, Server Components

Yeah. To your point, Wesley, you you I think you might you know, with the CMSs, I for a,

And they throw a 10 second loader, Less than 10 seconds.

where

That they had 90 different CMSs being used over their different markets.

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, Oh, it's good. We we talked about we were talking about, like,

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.

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?

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.

people will post a screenshot

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

of people that need to be unsubscribed, and some poor Sol has to go take it off of, like, 90 different CMSs.

the the site loads pretty fast.

Yeah. Right. Right. Totally get.

before you can go to any other page on it. And,

a a car company that may not be named, different Oh, wow. Based on all their different markets. Because when we were doing,

90? 90

Scott.

when well, when maybe not myself, but somebody who may or may not be me was doing,

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.

but after, 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,

And then

when And that that's very similar to The defer black or white out the whole page

Lee before this,

and update the things. I was telling,

a couple months ago where, what was who was it? On the a couple of podcasts ago, we had somebody on. We're talking about just, like, enjoying

JS versions have been just a piece of cake to update almost Almost no issues. Just follow the change log and 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

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

Of course, Scott showed up is that we had 1 issue on the syntax website or,

I think we there was, like, a major upgrade

server side rendering was rolled out, and We got some help on that. And then

And, Oh, good. Good. I'm glad that you, the client side JavaScript to be rendered because You know you know, sometimes

we had some help over the years having it upgraded.

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.

You wait for that JavaScript to

And to your point, when you're server rendering and you're prerendering some HTML

part of your your website that you don't necessarily care to have Using code and the Vercel stuff and the Next. Js stuff just started

the progressive hydration or or selective hydration, I'm not sure what the actual specific,

If they can, you know, immediately click somewhere else on the page if they wanna go somewhere, they don't have to wait for Yeah. I'm Lee Robinson. I am the VP of Developer experience at Vercel,

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

your own custom way.

load or hydrate so you can actually click on some stuff.

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,

So so so selective hydration,

you're able to make that page interactive more quickly.

It's better for performance, better for your your customers, your visitors description word is there, but you're you're deferring the loading

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

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,

before Next. Js came about

So you wrap a component or a, you know, a component tree with a suspense boundary, And you can, you know, progressively from the server,

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

just a little

hydration.

To hydrate the DOM with the the the client side JavaScript And we're gonna be talking all things

was a tremendous pain in React.

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

My favorite one and also most recently discovered one,

comes about. And, basically, it's readding that JavaScript

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, all kinds of stuff, React, Next. Js, Vercel stuff,

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, little sneak,

feature in React 18. I didn't really realize how powerful it was until I actually used it, which is Selective

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, this is just HTML.

using the same, essentially, the same React code, which,

client side

Yeah. Like, this is this is probably the last, like, 4 or 5 next

Immediately bad.

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

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,

Oh, no.

That makes sense. You're saying, okay. Like, I'd like to load this thing, but it's not,

Like, maybe it's analytics

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

Interesting.

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 they throw up.

attribute in on a script tag as well. Right? Exactly. Exactly.

one of the biggest, if not the biggest company in all of Canada.

of the the JavaScript there. It's not necessarily that you'll have no JavaScript.

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? Hey, everybody. I'm in suspense of what this episode will contain.

something that is not that important to get the thing running, and we shouldn't hold everything up,

Oh, no.

I think it's a 10 second loader 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.

Welcome to Syntax Supper Club. Today,

This

I sure hope you're hungry.

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.

is the Syntax supper club.

And LightStep incident

This episode is sponsored by 2 amazing companies, Gatsby, which is

kept popping up over and over again because they're just like, I was loading the show notes for literally every single show

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.

and I lead our DevRel and documentation teams.

we have an amazing guest, Lee Robinson of Next. Js in Vercel.

And really just try to create a platform that's asynchronous code in the React ecosystem.

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,

My developer experience at Vercel is great, so thank you for that.

the fastest front end for the headless web,

Oh, I'm starving.

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.

Fast, enjoyable, and easy for developers

to take some code and put it on the Internet somewhere.

so buckle up and grab that old handle because this ride is going to get wild.

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

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

Longtime listener, first time joiner. Yeah. Good.

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.

some interesting and unique possibilities.

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

some nuance to it.

They might have fell into a state where they are

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 hydrate that part of the page

async await As you understand this model of

is it's more of a a built in primitive to express You're just saying it's not important Has

Especially for folks who've written Node. Js code before,

or, you know, browser code that's using

And with React 18 and kind of the future direction of React, It's really unlocking

I have some asynchronous code, maybe it's a fetch to some API

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

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,

I forget what it was. It was megs and megs of just text. And I thought, like,

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.

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

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