Next.js
===

Tejas: ~Test, test, test.~

Tim: ~Test, test, test.~[00:00:00] 

Tejas: Hello and welcome to Pod Rocket, the podcast brought to you by Log Rocket. Log Rocket helps software teams improve user experience with session replay, air tracking, and product analytics. Try it for free@logrocket.com. Today is an exciting day cuz we get the co-author of Next Js and the next Js lead maintainer at Brazil.

And also my friend, ~uh,~ Tim Kins. ~I hope I'm saying that correctly. If not, you'll tell me in a minute.~ Tim. ~Uh,~ it's a privilege, it's an honor to have you on the show. I'm excited to talk to you about all things Next Js, specifically 13.4 that was just launched, ~um,~ at Marcel ship. But before we get into it, ~uh,~ why don't we start with, ~uh,~ an intro to yourself, ~uh, for those of who, for those listeners who are just tuning it.~

Tim: ~Yeah. Hey, uh, Tek. Uh, thanks for having me. Um, you definitely pronounced my name. Uh, mostly correct. It, it's like, The, the Dutch, like, uh, a is, is, uh, not super normal for, for people that, that are not used to that. Um, but uh, yeah,~ so like a quick introduction about myself, ~uh,~ founded for Self for five years now.

~Um,~ working mostly on Nhas, ~uh,~ before there was a, a core contributor for about a year. ~Uh,~ so that was like right around the time that, ~uh,~ it was first launched. ~Um,~ I feel like in the,~ like,~ for self community ~for,~ for quite some time. ~Um,~ and then eventually, ~like~ I ended up working on basically my hobby project, ~uh, which, uh,~ which is next years.

~Um,~ so I've been working on ~like, uh,~ e-commerce websites, ~uh,~ for an agency before that[00:01:00] ~and,~ and now I've been mostly working on exercises for the, for about five years. Yeah.

Tejas: ~And,~ and before you joined Rael, so when it was just a hobby project, you also used it.~ Um, ~do you count yourself as a co-author of Next Js or did you join after? It was like initially written.

Tim: ~So I joined slightly after, uh,~ I, I joined maintaining the project, ~uh,~ slightly after it was launched. ~Um,~ but at some point, ~uh,~ Khar basically reached out and said ~like,~ Hey, We're going to add you to ~the,~ the list of archers of the project cuz you did so many contributions, ~uh,~ in ~the, like, the, like~ the few months right after it was launched.

~Um,~ so I, I got that title, ~um,~ didn't end up asking for it. I would've ~like,~ not minded if that wasn't the case, but it's ~uh, um,~ it was a nice, ~uh,~ recognition for the manga was putting in, ~um,~ Outside of, ~uh, like~ cuz I wasn't using it for my day job, I was just like contributing to the project cuz I found it very interesting to work on.

Tejas: ~Right. Yeah. Um,~ I also find it very interesting, ~uh,~ to work with. ~It's, it's,~ it's my go-to for React. And in fact, I feel like that's ~the, the,~ the prevalent advice, right? ~Like~ if you're starting a React app, it's probably best to start ~with,~ with next JS or some framework. ~Um,~ [00:02:00] but for the sake of. Brevity, we'll say Next.

Js.~ Um,~ next JS recently had a big release,~ um,~ and it was a really nice blog post to read. I'm talking about 13.4 where app router is stable. ~Um,~ I wanna talk to you about this, and I'm specifically interested in this, like in how next JS has been able to stay true to its core values or core design principles.

So I was reading, ~um,~ the original blog post that introduced njs to the world, not 13.4, but like 1.0 ~many, many,~ many years ago. ~Um,~ and there were ~those,~ those principles, right? There was, ~um, you know,~ zero set up, use the file system as an api. There was only JavaScript, everything is a function, et cetera. I'm curious if you could speak to those principles and then how, ~you know,~ NJS ~kind of~ adheres to them, ~uh,~ and the process behind that today.

Tim: Yeah, definitely. ~Um, one of the, the main like principles that we started with was, um,~ So it, it all started with a readme. So there, there was like a Readme that Sharma wrote. ~Um,~ and that one, ~uh,~ was basically like the blueprint for like, this is what the things like that he wanted to, ~uh,~ to solve with this framework.

So the framework that originally wasn't even called Nexus was called N four.[00:03:00] ~Um,~ it was like a handlebars ish, like special templating language, ~uh,~ with the. ~Uh,~ like ~the,~ the file system writing ~and,~ and all that. And they were using that to build the Versace website. ~Um,~ so this was really like, not meant to be open sourced, ~uh,~ from the start or whatever.

~Um,~ it really started out as ~like,~ we're building this thing in order to ship Foster for ~like~ Versace own properties. ~Um,~ so then at some point they basically made this big shift being like, Hey, we're going to use React instead. ~Uh,~ which wasn't a. Like a super clear bat at the time. ~Um,~ it was like end of 2016 ish.

Reactors got popular, but it wasn't like as popular as it is today. ~Um,~ and ~uh,~ basically they needed like a component model ~to,~ to go with that. So it's really like ~the,~ the core principles was like we're doing file system based routing. ~Uh,~ so it just means like you create a file in your pages directory, ~uh,~ any file really, like you, you call it like pages about yes.

And. That's a route. ~Um,~ you can now start coding,[00:04:00] ~um,~ in a way that's really similar to phb. ~Um,~ you'll often hear people joke around, ~uh, like,~ oh, like NHA is becoming php or Rails or, ~uh,~ whatever. But like that, there's a reason for that. ~And,~ and that's like also because a lot of the folks that worked on Nhas, ~um,~ have been active in a PhD community at some time.

~Um,~ Have worked on ~like~ work brass or, ~uh, like~ other frameworks. And, ~um,~ a lot of the ideas that ~like~ started, ~um,~ in other languages or frameworks ~or,~ or all that, ~um, kind of ~made its way into like mainstream usage but ~like~ changed over time or ~like~ wasn't as easy ~or,~ or things like that. So you started with ~like~ file system routing, ~uh,~ as the.

~Like~ ways you just create a file and start, ~uh,~ working on ~like~ your specific route. ~Um,~ and this file system router in the end turned out to be, ~uh,~ a really big bet on, ~um, like~ other optimizations we could do, right? So ~like,~ one of the things that Nexus can do is it can now ~split by, uh,~ split your JavaScript bundles by the, ~uh,~ individual, ~like~ files that you're creating in your pages directory.

And it was ~like~ a big step at the time. ~Uh,~ cuz [00:05:00] what we were doing back then is ~like, uh,~ web back, ~uh,~ let's just bundle everything into a single, ~uh,~ JavaScript file. ~Um,~ and ~like~ have the, ~like,~ have code splitting, but ~like~ code splitting couldn't really do anything cuz ~uh,~ in the end, ~like~ you were initializing all the code.

Cause they get our side effects in JavaScript and all that. ~Um,~ and what we did instead is ~like,~ Every page becomes own JavaScript bundle. ~Um,~ and then ~like~ from there we take it to more granularity ~like~ introducing dynamic imports and stuff like that.

Tejas: Right.

Tim: ~so yeah, I guess that sort of answers your question.~

~Um, but I, I've I renting so far,~

Tejas: ~No, no, that's good. That's, that's, I think that's what people are interested to listen to. Um, lots of, lots of information there. Um,~ and I do want to stay true to also the spirit of ~like~ giving listeners, ~you know,~ actionable things they can do, ~uh,~ based on the next JS story and with next Js part of that.

You mentioned a couple things. You mentioned, ~um,~ it started with a read me. And I love that because a lot of us just start hacking immediately, especially in the age of ~like~ create react app or even create next step. You get to read me and then you start building something. ~Um, so,~ so I love this idea of no, no, no.

You start by writing it down and then you implement. ~Um,~ and I do feel, I don't know if you'd agree that this is something that, this is a principle that will influence a lot of people's engineering for the better.[00:06:00] ~Um,~ I'm curious, you mentioned this routing ~and,~ and how it led to the innovation of. Route based code splitting around 2016 when N four was a thing when N four existed.

I'm curious where, ~um,~ react Router ~was, was it,~ was it not introduced yet? Was it new? And I'm not trying to ~like~ draw any, ~like,~ controversial lines or anything. I'm just curious about the state of the ecosystem at the time.

Tim: ~Um, I,~ I'm not sure to be honest. ~Uh,~ it did exist. ~Uh,~ I, I was using it for, ~uh, like~ a project, ~um,~ At work at the time. ~Uh,~ so I do know that ~like~ we used it there. ~Um,~ I'm not sure which version it was. It could be there was ~like~ an earlier version or something like that. ~Um,~ but this ~like~ shift of ~like,~ you're not the defining your route in ~like~ a component for example, ~was,~ was ~kind of like~ some of the, ~like~ the main shifts ~that~ that nhas,~ uh,~ introduced to the ecosystem.

~Yeah.~

Tejas: That's incredible. I'm curious, was N four like a acronym for something or like.

Tim: I'm not sure. ~Uh, I,~ I would've to check. ~Um, it,~ it was probably something like [00:07:00] that. ~Um,~ but in the end, like it, it just turned into next. ~Yeah.~

Tejas: ~Right.~ And I love seeing, as I said earlier, I love seeing how, ~um, you know,~ using the file system as an API is still true. Even with this big shift right from pages to app. ~You still,~ you still, instead of ~the,~ the file itself being the route, it's now page dot TSX or jsx, but. But ~the,~ the directory is still ~the,~ the identifier of their art as it worked the sub path.

~So that's,~ I love how you've stuck to that. The second design principle ~is,~ is only JavaScript and everything is a function. ~Um,~ and indeed we also see that everything is still a function, ~um,~ except maybe metadata, which is an object and also some config stuff. ~Um,~ but in spirit everything's a component. ~Um,~ I love how all of this ~is,~ is.

The same, but has gotten better. ~Uh,~ next JS 13.4 introduces some new features. I think ~the,~ the most popular feature, the most discussed, the most controversial and sometimes the most misunderstood feature is the use of React server components. ~Um,~ I've heard a lot of people honestly divided on these, ~um,~ some.

Love it because, oh, that's fantastic. That means everything's [00:08:00] getting smaller. We're shipping less code because a lot of the computation is done on the server and we only ship minimal rendered components over the network. ~Um,~ also it improves the data phishing story. You can have async components that execute only on the server.

~Um,~ but I've also heard a ton of criticism where people say, oh my God, this really ~like~ conflates my mental model, because now I have to think about which component is which. And also, ~um,~ context, a lot of people complain about, ~you know,~ server context, client context, et cetera. I'm curious if you could speak to that.

~Um,~ and also if we could give people like ~a,~ a sentence or two that kind of summarizes the best way to make use of these primitive.

Tim: Yeah, that makes sense. ~Uh,~ for a moment, ~uh, when,~ when you started talking, I was like, maybe he's going to mention that layouts is the biggest thing, but like there, there's like many other, ~um,~ like benefits to Appra ~that~ that is ~like, um,~ solving some of the ~like,~ so ~the,~ the thing is like in the nexia, ~uh,~ community, ~like.~

Server components wasn't really a thing that people asked for, like a lot per se. It was mostly, ~um,~ layout streaming, ~um,~ like suspense boundaries, not waiting on, ~uh,~ get service props to, to [00:09:00] get results and things like that. So it's really ~like~ there's these, it's like very large, ~uh,~ amount of, ~um,~ issues and, ~uh,~ feature requests that are now solved by.

~Um,~ changing the underlying architecture of Nhas. And that's ~like,~ that's been our main goal with this. It's like solving the actual problems that people have a lot in Nhas apps today. ~Um,~ so one of these is, ~uh,~ this layouts thing, ~like~ if you create, ~like~ we could have added layouts in, into pages, ~um,~ but it would've been less ideal ~than,~ than what you get today.

~Um, and then like~ the server component part is, Basically ~like~ taking this gears of ~like~ Nexus having ~like~ server side, ~uh,~ integration. ~So, um, uh,~ and a good example here is ~like~ you had gut server props, etic props, etic parts, and ~like~ all these nexus specific APIs and these kind of influenced the React team in a way where they were like, yeah, ~like~ this server side thing.

~Like~ we ~kind of~ proved ~that, that~ that works. ~Um,~ But in the end, ~like~ [00:10:00] it's not the best DX or ~like,~ not the best way to compose your components. Or ~like,~ even ~it, ~it's ~like~ not a way to compose your components, right? ~Like~ you're doing it separately from your componentry. So~ it's like,~ what if we move all of this data fetching logic and rendering logic that is not needed on in the browser, per se.

So ~like~ structural things in her page, for example. ~Um,~ and move all that rendering to the server. ~Um,~ and solve, ~uh,~ many other problems in, ~uh,~ in ~like~ the, in the current ecosystem around React. So one of them is, ~uh,~ we're shipping a lot of JavaScript to the browser. ~Um, like~ everyone will say React is quite big, but if you start looking into real apps, it's like React is quite big, but then it's still only like 10% of your whole app or something like that.

~Um,~ And with server components, we're basically shifting this back to, ~uh,~ react is quite big still, unfortunately. ~Um,~ we have some plans to get to a point where that's better. ~Uh,~ but that takes a lot of effort ~and,~ and time [00:11:00] to, ~uh,~ to develop, ~uh,~ like a smaller, ~uh,~ like alside basically. ~Um,~ But now we don't have this client side code bit that you are introducing yourself.

~Like,~ if I write an access app, I'm going to pull in all these libraries, ~like, uh, um, like ~stuff to ~like maybe, uh,~ format my, ~uh,~ currency or do internationalization or do, ~uh,~ data fetching or like all ~these,~ these libraries that you're using because, ~um, like.~ A few years ago, ~uh,~ MPM published at like 90% or so of your code is actually not your code, but someone else's code.

You pull into mpm, ~um,~ and in practice that's like what you're seeing. You're like pulling in all these libraries to then do all these, ~uh,~ functionality for you, but you're also shipping into the browsers and like with server combined, ensure shifting that away to the server, which, ~uh,~ has the bundle obviously, but then.

It does other benefits as well, ~like~ it's closer to your database or it's ~like,~ has lower latency to your database or your APIs. And this allows you to do data fetching in your components cuz [00:12:00] then, ~uh, like~ if your database queries are less than a few milliseconds, then ~uh,~ you can like, uh, just keep rendering components due to, ~uh,~ to the due, the data fetching there.

And get the result out, send the result to the browser, which is what sort of combines does, and then hydrate that without the actual need for ~all the,~ all the, ~uh,~ the static bits in that. When I say static, it's like ~the,~ the Ds, ~uh, like~ the header, stuff like that. You can still have dynamic pieces where ~like, uh,~ you get client components, ~which is the.~

If you used to react, ~uh,~ before server components, that's basically like any component. ~Um,~ and yeah, it's really exciting to see like where people will take this cuz it allows you for ~like~ way more, ~uh,~ granularity and ~like~ what you're sending to the browser, but also it now allows you to. The site between ~like,~ I want to render this component or this other component.

~Um,~ and it could be separate bundles, for example. You get way more granular code splitting, ~uh,~ by default as well.

Tejas: Yeah, that, that does sound really [00:13:00] powerful, especially this idea that because of server components being a new primitive, it unlocks and unblocks a whole class of issues. For example, layouts, streaming data fashioning, et cetera. ~Um,~ That said, the primitive of silver components itself is something that I think people are still very interested in.

And I do have some more questions, but we need to pause a bit ~for the, um,~ for a little word from our sponsor. ~Um,~ this podcast is brought to you by Log Rocket. Log. Rocket offers session, replay, issue tracking. Product analytics to help you quickly surface and solve impactful issues affecting your user experience.

With Log Rocket, you can find and solve issues faster, improve conversion and adoption, spend more time building a better product. So I would encourage everyone, check out Log Rocket if you're enjoying this conversation. But to come back to server components, ~um,~ I'm curious because ~like~ React has before Next JS and other frameworks, react has been.

Predominantly focused on client side apps, right? ~We,~ we've seen so many s spas, single page applications built with React. I've got many production, ~um, and,~ and server components ~is a,~ is a massive shift to that. I'm curious if. [00:14:00] This came about, if the React, ~um,~ the people who work on React, the React core team, ~um,~ have been a part of some type of conversation that led to, did, what I'm trying to say is Njs in my mind, popularized this idea that React works better with a server for multiple reasons, route-based code splitting as one.

~Um,~ I'm curious how the React team, ~um,~ decided, ~you know,~ let's look at server components and ~I'm,~ I'm curious if the next JS team had some type of say into that.

Tim: ~Um, yeah, we, we didn't, uh,~ so like contrary to, to ~like~ some people's belief,~ it's like we,~ we didn't tell the React team, Hey, ~um,~ here's, ~uh, ~like we're going to do everything we can ~to,~ to get this ~like~ CER components thing that we have invented, ~uh,~ in there, or something like that. That's really ~like,~ not. How it went.

It was more like, ~um,~ Sebastian, ~uh, on,~ on the React team, ~um,~ was, ~uh,~ was working on these problems, ~uh,~ for ~the,~ the new facebook.com. ~So,~

Tejas: ~What,~ what problems specifically?

Tim: ~So, so basically like the,~ the context here is ~like,~ new facebook.com is a React app. ~Like~ it's previously [00:15:00] what you had is ~like~ when, ~uh,~ react was first created,~ um, like~ they were using it, ~uh,~ for facebook.com, but it was ~like~ all these tiny bits of the page.

So we'd have ~like~ one instance of react, but it was rendering components all over your page. The rest of it was rendered by, ~um,~ by hack, by ~like~ PHB type thing that, ~uh,~ that meta built. ~Um,~ and then ~like,~ at some point, I don't have a full backstory here, so think this is just my recollection of ~like~ what, ~um, uh,~ what I've been told.

Basically, ~uh,~ over time, ~uh, it's like~ at some point ~they,~ they were like, we're going to rebuild all of, ~uh,~ facebook.com, but using, ~uh,~ react as the core principle ~of like,~ We're basically going to build ~like a,~ a framework, ~um,~ cuz they don't use NHA or any other framework in the, from the open source ecosystem.

Notice just started from scratch and they built ~a, um, like~ a framework that can handle the scale that Facebook has. ~Um,~ all this, ~um, uh,~ like rendering pipeline. Take all the learnings from what they did for, ~uh,~ for this other framework and ~like~ how ~that~ that worked before, ~um,~ and integrate it with Relay as a day later.

~So like ~relay was super, ~um, uh,~ important for this whole story, right? Like data [00:16:00] fetching. So all of this comes down to data fetching in the end, ~like~ writing data fetching. These are ~like~ the two things ~that, um, like~ that you always see come back in, ~in ~this ~like,~ reactive world or ~like~ any app. So the thing is that, ~um,~ really, it's actually really good.

~Like~ they optimize ~the~ it for. For this massive use case of ~like~ larger pages, all that. ~Um,~ and they ~uh,~ got to a point where ~like~ you get a lot of benefits from using relay, ~like~ you get code splitting based on data, for example. ~Um,~ might sound familiar cuz ~like~ that's what I brought up with ~like~ server combined can code split based on, ~uh,~ data.

So earlier, ~like~ you can render a different component based on your data, ~um,~ really allowed you to do that as well, right? ~Like~ you could write a query and then ~like~ get a component back from that. I think that's called entry points, ~uh,~ if I'm not mistaken. ~Um, and,~ and ~those,~ those were ~like~ really interesting ideas that they proved out and shipped ~to,~ to facebook.com.

And then, like, has been working on this for ~like~ five plus years with ~like~ a larger vision of this is what the, ~like~ React apps, ~uh,~ [00:17:00] in ~like~ modern React apps will look like. ~Um,~ and a lot of this is ~like, um,~ People would joke about the suspense for ~like~ getting the, ~uh,~ getting this ~like~ suspense feature.

~Uh,~ but there was ~like~ a lot of other underlying things that were unlocked by having suspense, by having transitions, by having, ~uh,~ what they call concurrent features. ~Um,~ and a lot of the burden of concurrent features is actually on the framework that you give developers. So in order to get to a point where, You can fully take advantage of all these ~like~ innovations that reacted, ~um,~ through ~like~ proving out, ~um,~ it for facebook.com.

~Um, like~ you need a framework in order to achieve that level of, ~um,~ integration. ~Um,~ and ~like~ built in ~like~ writing features basically. So you need a router that is aware of your backend in a way, ~like~ aware of your, ~like~ server components, for example, or your relay or something like that. And you need the data fetching, ~uh,~ to be aware of ~like~ how the writing structure works as well in order to make it,~ uh,~ performant and ~like~ only do the most [00:18:00] minimal amount of work when you're navigating, for example.

So all of this ~kind of like~ turn into this R F C for server components. ~So it's like,~ can we bring, ~um,~ And don't quote me in this cuz ~like,~ it's not exactly, ~uh,~ the way that I feel about, ~uh, this,~ this thing is like, can we bring the benefits that really gives you to the broader React ecosystem without having to, ~uh,~ tell everyone, ~like,~ go use GraphQL.

~Or like,~ this is the thing now you're, ~uh,~ first us to use this data layer, ~uh,~ like this database for example. Or, This particular API or this particular way of doing things. ~Um,~ and that's ~like~ where CER components came from. ~Like~ you get, ~um, like~ basically our data, you can render different components that are also interactive.

~Um,~ and you get this ~like~ more granular code splitting. The thing's missing from CER components is this thing that frameworks have to integrate. And that's~ like~ where ~like~ Nexus comes in basically. So we talked a lot with,~ uh, ~the, the broader React, ~uh, um,~ team and, ~uh,~ and Sam in particular, ~um,~ he had this [00:19:00] vision of ~like,~ this is where we want to go.

~Um,~ they ~kind of~ built that at the mead at some point, right? ~Like~ they built a router that is like aware of, ~um,~ of data ~and,~ and all that. ~Um,~ but ~like~ that's not going into the ecosystem overall. Cause ~like,~ this is like a very particular ~like, ~tailored case ~for,~ for their ~like~ particular needs. ~Um,~ And we were like, yeah, ~we~ we're kinda stuck in NextGen's pages land, right?

~Like~ we can do innovations, ~like~ we can make this better still. We can add layouts, we can do all these things. But the bottom line of that is ~like~ you're going to ship ~more and~ more and more JavaScript. You're going to get stuck at this ~like~ single level, ~um,~ data fetching. So ~like~ only in the page you can do data fetching.

And overall what you see is that the overall ecosystem is becoming more and more, ~uh, like~ dynamic and, ~uh, like~ components become smarter and smarter basically, right? ~Like~ you get components that can do, ~uh,~ more and more functionality ~like, uh,~ use S O B R or use query for example, ~from~ from UX query. ~Um,~ but those are only for client site, right?

~Like ~you can only do them in the browser. Whereas what we were [00:20:00] seeing is that ~like~ there is a performance benefit, ~uh,~ overall if you get, ~uh,~ this ~like~ low latency connection to your database, for example, and even, ~like,~ you can't do database queries in your browser, right? So ~you, you,~ you still can't do this thing where, ~um, like,~ I don't know, ~like~ the next WordPress won't be built on, ~uh,~ on ~like~ NHA pages directory, right?

~Like~ you, you would have to do all your data fetching for the whole page. ~Um,~ in, in that single place. ~Um,~ so that's ~like~ where we were coming ~from,~ from our side. It was like,~ it,~ it is going great. NEX is growing. It wasn't like a thing of ~like,~ oh, we need to do this new thing in order to keep, ~uh, like~ growing the framework ~or,~ or growing usage.

It's more like we ran into all these limitations ~to the,~ to the model that we had. And, ~uh,~ we saw the, ~um, like~ server components as this way to basically get to the next level of, ~um, like~ granularity ~for,~ for data fetching, solving these, ~uh,~ this JavaScript loading problem, ~uh,~ and giving you a better rider, which is also a big part of this.

So [00:21:00] not just layouts, it's also you get a completely brand new rider that is, Aware of, ~uh,~ transitions aware of Free React spend. ~Um,~ it, it integrates with transitions in that way. So a lot of this is actually ~like,~ we were able to delete probably ~like~ 50 ish percent of all the code that we had in ~like~ the Nexus Rider and just ~like~ offload that to your React server components.

~Uh,~ and ~like~ the integration with React. These are things like injecting script tags into your like head in order to wait for that script tag to load to then render the components. This is not all part of the ~like~ cerv components protocol. ~Um,~ and there's other things that React can now do, ~uh,~ that we've helped ~like~ build out in order to make ~the,~ the case that, ~um, like~ for you like building a React app on next jazz, ~um,~ better so ~like.~

Something that, ~uh,~ Josh and our team has been working on, ~uh,~ to get Rich React team, ~uh,~ is ~uh,~ basically ~like~ a thing that they call float. ~Uh, you,~ you might have heard ~like, uh,~ things like float forget flight, ~like~ these [00:22:00] are the names that, ~um,~ the React team gives to projects and float is ~like,~ particularly about injecting tags into the head.

~Um,~ So you can think about it as ~like,~ I render a link tag in a component, but I don't want my link tag to be in the body per se. So React is aware of that link tag and it will just edit into the head and remove it at ~the,~ the right time as well. This is really important cuz ~like ~there's a problem that you get into when you get into framework's land, which is ~like, um,~ what if.

~Nexus is like~ we have this convention to do, ~uh, like~ global css, right? ~Like~ import some CSS file. Now you get a CSS file out. But how do you make sure that, ~um,~ that CSS file is loaded before React starts rendering, ~uh,~ so that you don't get this ~like~ flesh of insult content, for example. And these are like lower level bits that we've.

Contributed back into React as well in order to make, ~uh, like~ overall integration with server finance better as well.

Tejas: Wow. Yeah, it sounds [00:23:00] there's so much. Thank you for that, by the way, that was a very nice, ~um,~ deep dive into where server components came from and how Njs joined the conversation. ~Um,~ there's a. I think a mutual friend of ours, Suze Teller, who leads a workshop, ~um,~ about thinking like a senior engineer, and I think this is some real, I would say, senior plus engineer thinking, right?

Because ~the,~ the problems that you're, you were trying to solve with next js ~uh,~ problems of ~like~ nested routes and layouts, problems of data fetching, ~uh,~ even suspense and streaming and seo, all of these problems could be solved without server components, but, They would still be subpar solutions or incomplete solutions, right?

Because you would increase the amount of JavaScript you're shipping and ~it's,~ it's ~kind of~ diminishing returns. Like you get some features, but you also have bigger costs and it's not ideal. So somewhere along the line, it sounds like, ~um,~ the next GS team was like, ~you know,~ what? Server components would solve all of these problems and more.

Um, and that thinking and decision making ~is,~ is I think, exemplary. ~Um, so I~

Tim: ~uh, we,~ we've kept a, like I've been keeping a list while we were building this, of ~like~ every time I got pinged [00:24:00] on the issue saying this thing is broken in, ~uh,~ in the page directory, right? ~Like,~ this thing is broken for me in this particular edge case. I'm like, great. ~Uh,~ this is solved in, ~uh,~ the new app rider.

~Um,~ Built in, ~uh,~ things. This doesn't mean ~like~ Nexus books are not solved ~in,~ in pages, for example. It's more ~like, um,~ this is a fundamental thing that's ~like~ unsolvable in pages without a massive, ~uh,~ rework of how everything works. And that, that change would also mean breaks your app still, right? ~Like~ you would have to upgrade and deal with breaking changes.

~Um,~ so that's ~like~ one of the things that we haven't really talked about is~ like,~ It's totally fine if you're currently using pages and you don't even want to use the ~App~ App rider per se, or~ like~ want to wait with, ~uh,~ adopting it or things like that. ~Uh,~ cuz pages are still there. We didn't deprecate it.

~Um,~ and it's still there. ~Like we,~ we just feel that the, ~um,~ app Rider is the, ~like,~ it's the future of ~what,~ what Nexus will do. And the main thing, ~uh,~ there is also that. It's not super hard to migrate. ~Uh,~ depending [00:25:00] on ~like~ what your app is doing, ~uh,~ you can start with moving a single page to App Rider. Just add, use client.

~Um,~ and at that point it becomes like a component that was similar to what you got in, ~uh,~ in the beach directory.

Tejas: ~Yeah. Um, that's, it's, that's,~ I'm curious ~if, if,~ if y'all have thought about, I'm sure actually, I'm not curious. I'm sure you've thought about. ~Um,~ when pages will lose support, ~uh,~ or if there's some type of plan long term, maybe many years away or something to like sunset pages in favor of app directory.

Tim: It's,~ um,~ like we, we haven't, ~uh,~ announced this particular date of ~like,~ we're going to cut it off at this point. ~Um,~ we're still going to discuss that further at a later point. ~Um,~ for right now, there's not a massive maintenance burden on keeping pages. ~Uh,~ the only thing here is that for newer features, we will make sure that it works in app router, ~uh,~ and probably ~like~ pages will not get it depending on ~like~ how it, ~like,~ it depends on ~like~ what we're doing, [00:26:00] right?

~Like~ if we're building a feature that is particularly, ~Um, like~ needs to work in, ~uh, like~ transitions or use suspense or do data fetching ~or,~ or things like that. ~Um,~ there is ~like~ no way to port that back to, to support it ~in,~ in the app rider. ~Um,~ there's other cases where we do, ~right, like, uh, we,~ we introduced, ~uh,~ in 13 four, ~uh,~ new thing called draft mode. It's ~like~ a, ~um,~ a new take on what preview mode was before. And draft mode works in pages and an app, ~uh,~ but even ~like~ the new rider. So ~like, um,~ if you use next navigation, like use Rider from Next Navigation, you can actually use that in pages so that it helps you ~like~ migrate. ~Um,~ because the, essentially ~like the, the,~ the app, ~uh,~ use rider is, ~um, like~ a smaller subset of what you would previously have as, ~um, Like, uh,~ options and all that in ~the,~ the pages rider.

Tejas: ~Right. Um, okay. That's good to know.~ I'm curious, ~um,~ you mentioned transitions, I'm assuming you mean route transitions. So like when you go from one page to another, ~um, And,~ and how, ~um, the, the, the,~ the support for layouts, ~you know,~ only changes a subset of the page based on [00:27:00] route transitions. And this is of course, something that isn't supported with pages.

~Right. Okay.~

Tim: Yeah, ~the,~ the important thing here is that, ~um, uh,~ when I say transitions, I mean react transitions. And that doesn't mean navigations per se. Navigations just is one thing that uses transitions under the hood. ~Um,~ so if you've seen use transition in, ~uh,~ react, ~uh,~ it's basically a hook that allows you to observe when a transition is happening, so you to start transition.

~Um,~ and it allows you to see the spending of that. So transition is basically ~like, uh,~ the moment, ~uh,~ like it basically allows you to render in the background in a way so it, ~uh,~ it will render till the point where the first suspense boundaries hit, or if there's no suspense boundary hit, it will just render all the way to till the end, ~uh,~ and then at that point commit ~the,~ the update.

So what this allows you to do is basically, ~Um,~ render a complete react componentry in the background while you're still seeing all the other things on the page, and you can still interact with them as well. ~So,~ and this is [00:28:00] why, ~uh,~ why it's called concurrent, cuz you can concurrently have multiple, ~uh, like the,~ the way that we've been, ~uh,~ calling it as ~like ~different realities in a way.

~Or like you're, you're basically like~ you have one render of the app, but in the background it could be that there's three other renders of the app. Happening at the same time. And those three other renders are also, ~um,~ kept track of in which order they happened. So usually you have this race condition, right?

~Like you click, um, on the link,~ you click on their link, you click on under link, and then the first one comes back, you see that page for a second, you, or for ~like, uh,~ 10 milliseconds, and then you see it flash the other and then flash the other, ~or,~ or you see it cancel in between. ~Uh,~ which is also not ideal, ~uh,~ in some cases. And this is a thing that transition, ~uh,~ solves where it can do this discarding of previous transitions or a previous state. ~Uh,~ but it's not really about navigations per se. It's also about other interactions that you're doing, ~like~ set state or things ~like~ that could be wrapped in the transition. And you can observe, ~um,~ these changes while ~like~ data is loading or [00:29:00] while code is loading or things like that.

Tejas: ~Right, so,~ so start transition. So use transition returns, ~you know,~ is pending and start transition. And when you call start transition, you effectively. Start rendering in an alternate reality. ~Right.~

~And that~ 

Tim: yeah. Basically that. Yeah.

Tejas: ~Um,~ that is, that cancelable ~like~ a, ~an~ an a running transition.

Tim: ~Uh,~ so you can't cancel them. That's ~the,~ the thing here, ~you,~ you would just have it render in the background and that's fine. ~Um,~ it will just, You three or another transition, and then ~like~ that final transition is the one that you'll, ~uh,~ see on screen, ~uh,~ in the end.

Tejas: ~Great. Um, one,~ I have a question about the new, ~um,~ app route because with get server side props, ~uh,~ or get static props in pages, ~um,~ when you fetch your data and then return them as props to your component, ~you know,~ next we'll ~kind of~ embed them in the markup, right? So you have these tags at the bottom with js o n responses, ~um,~ with app directory.

~Uh,~ is that still a thing?

Tim: ~Um, sort of,~ so it, it ~kind of~ depends, like the, there still is some data in the, at the end of ~the,~ the H shm L basically. ~Um, and the reason for this is that, uh, the cerv protocol is basically like, um,~ the way that I've been explaining it, and it's not exactly like this, but ~like~ you basically end up [00:30:00] rendering server components.

That's one pause. So it's rendering a React component tree. The main thing there is that every single client component is a reference to the client component, not actually the component. So it ends up not rendering those that will keep those references. And now you do another pass, which is like render to html and render to HTML would be, ~uh,~ basically we're rendering ~the,~ the output of the Rex server components three.

So it's ~like~ an intermediate, ~um,~ state in a way, ~like ~it's ~a. Um, like~ basically ~like~ a, an output that kinda resembles jsx, but not exactly. And it will use that to create, ~uh,~ the actual ~like~ HTML node. So this means that in ~the,~ the second render, that's where, ~uh,~ client components are rendered, and that's where cer components are not rendered.

Again, ~like~ they, they would just take ~the,~ the output from the server component that was already rendered. Now the finger is, Then in order to hydrate in the browser, which is ~like ~what the, ~like~ unco and score next data, ~um, like~ included all the props, [00:31:00] what we now do is we include the RSC rendered payload, like the RSC payload is what we call it.

~Um,~ so that ~like~ GSX resembled, ~uh,~ thing that has the references to client components and then we use that, ~uh,~ to hydrate in the browser as well. And that means that the server components are. ~Uh, like~ those are still, that ~like~ rendered output. The client components will become interactive at that point cuz they, ~uh,~ will be hydrated based ~on,~ on these references.

So we'll load the code for it as well. And that's why I was saying ~like,~ nexus no longer needs to do code loading cuz ~like~ React has a code loading primitive here.

Tejas: ~Right.~ And then the server components, those also hydrate though, or do they just stay static throughout the life cycle of the application?

Tim: ~So they, um, so it's like a, an like a semi aesthetic, uh, like, well, it's like aesthetic, um, like it's,~ it's almost like Jason in a way. So it's ~like sort of ~like a Jason of ~like the,~ the whole reactory. ~Um,~ but it's not Jason. It's~ like~ a special format. ~Uh,~ cuz Jason can't, ~uh,~ express

Tejas: ~Well,~ no, but what I mean is during hydration, ~um,~ event listeners are attached to the actual, like elements on the screen. ~Um,~ but server components have no event listeners because they're server components. So ~in,~ in, in that definition of [00:32:00] hydration, then do server components ever hydrate?

Tim: ~Yeah. So the browser's not aware, like~ the reacting, the browser's not aware of server components, even existing, ~it's like the,~ it's only aware of the output, ~um,~ of the server component. And that's a, ~like a ~static thing that doesn't have, ~like,~ that's why you can't have event listeners or state or whatever.

Cause then we have to ship the, ~uh,~ JavaScript to the browser, which would be a client component.

Tejas: ~Yeah. Okay. So, but no,~ that makes a lot of sense because React then works with so react elements and these ~like~ special server component output type elements and does its,

Tim: Those are ~like~ converted back into react elements basically. So you basically get ~like~ a, it is like a serialization protocol of react, ~uh,~ elements from, ~uh,~ the server to the browser. And then this is why, ~um, like~ different from, ~uh,~ from just like rear rendering everything on the server and then ~like~ fasting it back to the browsers.

~Uh,~ when you're navigating, for example, what we do instead, we fetch the RSC payloads and they use that to render, ~uh,~ into browsers.

Tejas: Right.

Tim: is why we don't have to do H M L rendering or anything like that [00:33:00] on the server for a client set navigations. ~Um,~ it's also why you can preserve state between, ~uh,~ these ~like~ server components three renders as well, because what you get back is you get, ~uh,~ this ~like~ static payload.

~Um,~ and if all the keys just match up, it will still be ~like~ basically react to consider them exactly the same as what it was before. So it's almost like a, ~uh, like.~ State update where nothing, ~uh,~ changes, ~right.~

Tejas: ~Right.~ This is also probably why. ~So I've been,~ I've been talking about several components a lot, ~um, with,~ with. A bunch of people, including the React team, and I keep hearing that ~you, you kind, it's a,~ it's a bundler ~that~ that would tie server components and entire and client components together. It's almost like you have two separate dependency graphs.

These are my server components and these are my client components. And what you just said ~kind of.~ That, ~like~ alludes to that, right? Because ~the,~ the browser has no idea what a server component even is. It just gets this special format and then uses it in reconciliation. Awesome. ~Um,~ we have just a few minutes left.

I wanted to address some questions that people asked on Twitter. ~Um,~ I did tweet about this and thank you for retweeting it. ~Um,~ and there's a lot of people with questions I want to particularly highlight. Roy Dirks, ~uh,~ my good friend at Get Hack team on Twitter, he says he's [00:34:00] curious about, ~um,~ how.

Collaborations with other libraries and tech works. So ~how, how do I, there~ there's no secret that the next GS team does heavy collaboration with the React team, but also does work with ~like~ Chrome web vitals, for example. ~Um,~ and Roy asks quite broadly, how does that collaboration work? What does that look like?

What input do you have and vice versa.

Tim: ~Uh,~ yeah, good question. So one of the things to, to mention here is ~like~ React is, ~uh,~ basically since last year when, ~uh,~ Sebastian joined, ~uh,~ Roel. ~Um,~ and, ~uh,~ someone else joined our team as well. ~Uh, uh,~ Josh who had mentioned before, ~um,~ we was basically, ~uh,~ we hired him to work on React as well as a contributor.

~Um,~ Basically, ~like~ since then, reactor ~sort of~ become a multi-company collaboration. ~Um,~ actually that's giving us too much credit, to be honest. ~Like~ there are other people on the React team that, ~um,~ that left Meta ~and,~ and kept contributing, ~uh,~ which is ~uh, uh,~ pretty awesome to see as well.~ Um,~ so that's like Brian, ~uh,~ who works at Replay now.

~Um,~ and Sophie, I'm not sure where she's working now, but ~like,~ Basically like they, ~uh, ~they kept [00:35:00] contributing, ~uh,~ and kept providing input ~on,~ on all the features, RFCs and all that. ~Uh,~ and then ~like~ Sebastian joined for sale. ~Um,~ one of the things here is that ~like~ Sebastian had this vision of ~like,~ this is where we want to take, ~uh,~ react ~and,~ and server components.

~Um,~ and ~then like we basically, like~ I believed in that vision, ~uh, and,~ and so did, ~uh,~ I love other folks at ce. ~Um,~ and that's why we. Started collaborating there, ~uh,~ and working on it. ~Um,~ in the end, ~like I, I,~ I looked back, ~uh,~ right after release and it turned out that we spent exactly a year on working on this, ~uh,~ just on Nexus features ~and,~ and all that.

~Um,~ obviously ~like~ scope increased over time, like in the end, ~like~ we created ~like~ next year, ~um,~ as we want it to be for the next ~like~ five to 10 years. ~Um,~ Instead of, ~uh,~ building out like individual features for pages that, ~uh,~ didn't fit together. It doesn't answer your question completely. ~So like the,~ the collaboration, ~um, it's kind of like we, um,~ we talk to them regularly obviously, ~like~ we now have ~like,~ react contributors ~on,~ on ~the,~ the sell side as well.

~Uh,~ which makes like overall, ~like, uh, it is,~ it is been good, like really good to see the collaboration here cuz ~like,~ In the end, ~what we,~ what we end up [00:36:00] doing. And like from our side, it's not like we're implementing this thing that NHA will use and ~like, we,~ we need to add this ~like,~ special snowflake thing that, ~um,~ that only Nexuses can use or anything like that.

It's more like we have these general problems that all frameworks are run into with CER components and with, ~uh,~ integrating, ~uh,~ with React itself. Like React flow, for example. Where, ~uh,~ like we, we need to solve these in order to make ~the,~ the broader ecosystem work, right? Like where Link Techs work and ~uh,~ and all that.

So we collaborate, ~uh,~ with them ~like~ quite heavily. ~Um,~ but ~that,~ that's also because ~we,~ we wanted to make the server components, ~uh, like~ the goal of making Cerv combines reality, ~uh,~ what was ~like~ there from the start. Then for the Chrome team, it's a bit different, so they have a, Team called, ~uh,~ Aurora team, which is a team within, ~uh,~ the Chrome organization.

~Like~ historically,~ like~ Chrome has been, ~uh, like they,~ what they said themselves is ~like, we,~ we haven't been collaborating with the overall ecosystem enough. So they basically had this problem [00:37:00] where they would ship features, ~like~ try them over the, ~like~ it's this classic, ~uh, like~ we, we built this thing. And now everyone has to adopt it.

But how do we get this adoption when, ~like,~ you might not know about this, ~uh,~ new feature, right? ~Like,~ I dunno, ~like, uh,~ an example being ~like, um, like~ high priority, ~uh, like~ images for example, or, ~uh,~ images with the loading attribute ~and,~ and things like that. ~Um,~ that have a, like ~the,~ the features by themselves have a massive impact on the overall ~like, uh,~ health of the web, but, In order to get them to be this impactful, you need to have this collaboration with frameworks and not just nexuses ~to,~ to get to a point where, ~uh,~ you get ~like~ large adoption.

So what they saw is ~like~ Nexus apps are used by, ~uh,~ quite a lot of the, some of the largest sites in terms of traffic. ~Um,~ and because of that, if they make a change to next year, for example, improve the bending. It can have a, ~uh, like~ larger impact on the overall, ~um,~ web as a whole. ~Uh,~ and similarly they're working with ~the,~ the Ang team obviously, cuz ~uh,~ like [00:38:00] it's not just cuz they're, ~uh,~ part of Google or anything like that.

~It's because they, like~ anger itself has a large, ~uh,~ user base as well. ~Uh,~ the n team, ~uh,~ who have been doing, ~uh,~ awesome as well. And, ~uh,~ this collaboration is ~like,~ We meet regularly. ~Um, they, um,~ they're not like, we implemented this feature, ~like,~ can you please use it? ~Uh,~ it's more ~like, uh, we're,~ we're planning to do this thing.

~Like~ what do you think about it? ~Like we,~ we'd like your feedback on, ~uh,~ on for example, like something that they just announced as baseline, ~uh,~ and ~like,~ I don't know if you've heard of that, but it's basically a way, ~uh,~ to say, This is the, ~uh,~ set of browsers that if you support them, you should be fine. ~Um,~ and this is like big problem overall on the web, right?

~Like, uh,~ my, my boss tells me to use i e nine. ~Uh, you, you might be laughing now, uh, like I see it on your face, but, um,~ I saw an issue earlier this week of someone saying, Can you please add support for IE nine to App Rider? ~Um, and,~ and ~like~ React doesn't support that obviously and all that, because I need to ship this.

Don't ask me why. ~Um,~ and ~the,~ the thing with Baseline is ~like,~ it's basically like a, ~uh,~ collaboration between all the brass [00:39:00] vendors to say this is the, ~uh,~ critical mass of. The browsers where, ~uh,~ if it's, if the feature is part of baseline, it's now introduced in, ~uh,~ the, ~uh,~ MDN docs as well, ~like~ it will say, okay, you can now use this cuz it's, ~uh,~ implemented in enough browsers, ~uh,~ or like enough versions of browsers to, ~uh,~ to get to a point where ~like,~ I don't know, ~like~ for example, async Await can be used, ~uh, like, like~ that's a bad example cuz that's been around for a while.

But like some of the newer features, right? ~Like.~ You're always struggling to be like, oh, what, when do I need to load the poly fill? ~Right.~

Tejas: Yeah.

Tim: this is where, ~uh,~ this baseline initiative ~is,~ is,~ uh,~ really interesting.

Tejas: Yeah.

Tim: ~Um,~ and like, how does this interplay with, ~like~ Nexus for example, ~it's like~ Nexus would have to implement this baseline support ~to,~ to basically have ~a,~ a default browsers list, for example, that has ~like~ baseline as ~the, the,~ the browsers for example.

~Um,~ and that's ~like~ the, ~like,~ that's part of the collaboration. Another thing is ~like,~ they spend a lot of time on ~like,~ script loading images, ~uh, like~ things that sound [00:40:00] simple and they're like, in practices are really not like they, they end up, ~uh, like~ messing up with like your core vitals ~and,~ and all that.

~Um, and,~ and that's where they, ~uh,~ they collaborate the most. Yeah.

Tejas: Wow. Okay. Yeah. So something like this differ attribute on images or something like this ~or,~ or what was it like Loading equals lazy. There was,

Tim: Yeah, it's like loading lazy is a, is an example, but ~like~ there's another problem here, which is ~like~ loading lazy on everything is bad. ~Uh,~ like your L C P will be wrong, ~uh, like~ will be, ~uh,~ slower as well. ~Um,~ so this is where it is, ~um, like~ where frameworks can make a difference basically.

Tejas: ~Yeah, because that's just optimized away. Great. All right. We,~ we are in the final few minutes, Tim. It's been an absolute pleasure. I'm sure not just I, ~uh,~ think of that, but ~all,~ all the listeners, ~um,~ one final question, ~uh,~ for you, and that is a very broad question, but I'm curious cuz you probably knee deep in this stuff, what are you, ~um,~ interested in, excited about these days in the ecosystem or even with next Js?

Tim: ~Um,~ obviously I'm gonna say up rider, but, ~uh, the,~ the thing here is that, ~um, like,~ like I said, we've been working this ~for,~ for over a year now, and. One of ~the,~ the main things here is that it unlocks a lot of things in the [00:41:00] ecosystem. So ~like,~ what I'm excited about is what it is, not what we are going to do with it.

It's ~like~ what you are going to do with it. ~Like, uh,~ maybe ~like~ the company you work for or ~like~ some other, someone else in the ecosystem. ~It's like~ I'm going to build a, ~um,~ like ~a,~ a layer, ~like~ a data layer that is compatible with server components and like that allows you to. ~Uh,~ to fetch data in ~like~ any component that's already possible, but ~like,~ has the, ~like right.~

Cashing, ~uh,~ heuristics, ~like~ has the, ~uh,~ the duping built in, ~um,~ has ~like,~ support for server actions, which we didn't even talk about. ~Um,~ but ~like the,~ the things I'm excited about is like seeing what people will do with this now that you have better primitives. ~So like~ I saw a tweet from someone that was like, I created a server component that's basically ~like, Um,~ like MySQL admin, but ~uh,~ with Prisma where you can create,~ like,~ it's a component that you give to Prisma instant, ~like~ a server component you give from Prisma instant and it will visualize your whole database tables.

~Um,~ I can't remember who it was exactly, ~uh,~ and probably wouldn't be able to find it. ~Otherwise we, we could add to the show notes.~ But this is the thing that I'm excited about. It's ~like,~ People taking these, ~uh,~ new component [00:42:00] primitives and building better components or better hooks or better, ~uh,~ data fetching integrations.

Tejas: That's, I'm also very excited about that and ~it's a,~ it's a real shame we didn't get to address server actions to truth be told, I could honestly hang out with you for ~like~ 90 minutes, two or two hours talking about, but we are ~on a, on a,~ on a schedule, ~so, um,~ thank you Tim. I think we'll leave it here.

Appreciate your time. Thanks for coming on the Pod Rocket podcast.

Tim: Thank you.