What’s Next for Next.js with Tim Neutkens

it's just part of React now and you don't have to think about it. And you don't have to think about it in so many ways that are so complicated. It's, like, reason about that, But, like, at that point,

you can pass

So you move all that logic down, so magical when you did this, like, Node command and you would just see use callback everywhere because I don't want anything to change, like, between renders. And that's not always the best way to do it in the end. So, like, larger, how can I, So over time, they had to, like, optimize a lot, add more caches, add ad hoc caches into the system, add defaults now. You can opt into more static behavior once you want to, like, optimize more, basically.

produce anything you want because it's just like a Node. Js request response handler, React components as part of that.

like, our our teams end up talking quite often. And it's mostly because of, like, confusing to people coming from, like, I'm only using, like, clients that react, Because you don't have to think about, where do I add memo? Where do I add, like, use callback? Where do I make sure that things don't rerender? And we only recompute that, like, narrow part of the graph.

what do I do when I do interactions? So, like, interactions could be, Like, some of the new libraries are shipping, like, 10,000 reexports. Exports. Right? Like, they're shipping, like, 10,000 different components onto the platform, which JS, like, I'm literally editing in in production. Right? Yeah. In my Dreamweaver, like, editor is just, like, connected to to production. Yeah. FTP right into the box and hit save. Delete. Yeah. Yeah. Delete.

are actually things that can render on the server and they need data from the server.

for for, like, the, their website. Yeah. That's good. Do you know what the status

you want to, onto the item. Then, like, the next step there is, Maybe only the the, like, the content doesn't need it, but the header and the footer do need, like, some interactivity that JS, like, use data, use, use effect.

Node one had built a router that that is, like, compatible with server components yet at that point. So we we had to, like, figure out and and transitions as well, by the way. So, like, implementation side of things for for, like, some of the new features that you've seen have come out of Vercel as Wes. Like, some of the, like, more well known but also lesser known ones. So, like, what that means is, like, your recompiles behaviors that, once, like, more frameworks started off Tingus. So, at some point.

We got 10 minutes left. I got a lot I wanna

API as much as I love the revalidate tag. And and for anyone listening, the way that it works is that

ask about here. That's why I was looking through here. Our Wes were, like, 10% of the way through the ones that we had written down before. If we could touch really quickly on Turbo Pack, like, what it is and and what problems it's gonna solve, I think that would be be probably useful.

proposal for, like, bringing that into the the JavaScript spec.

or any hang ups on getting async

you already get a slightly better experience because you can get the header, the footer, but then, like, the content has a loading Scott like a skeleton or or like some kind of spinner or anything anything you want really, because you can provide your own loading state there.

like one of the secretive code names. But that that was, like, the thing that allows you to, to basically give us the ability to, But now we have to add back,

APIs that that make that type of thing a little bit easier, but

So we ended up, like, building a a special writer that wasn't, like that hadn't been done before.

like, similar to Meta, like, we're also dogfooding, like, Next. Js at, the apps that we already get, can adjust behavior in the CMS itself. So you can, like, build, webpack,

me and Scott were talking about it on pnpm episode. We kinda, like, look at it. Like, wouldn't it be nicer just to be able to await

or on the client server to

there there's, like, And then you can some caching improvements as Wes. If you, like, didn't like the the previous caching, what you do now is you move all that logic into this async server component

server components came out, and Next. Js had this, like, revalidate tag, revalidate path,

And I'm I'm thinking to myself, alright. I I I'm gonna move Office Express eventually.

like, faster. You you get, like, faster times first byte, slightly better core app files, that kind of thing.

And then we also have the a much better explanation than than I will ever be able to do, I think. Mhmm. Yeah. But in in essence, it's like, important because now all all framers can just, like they don't no no longer have to worry about this. Like, in migrating to React server components, Because, like, for Webpack, like, doesn't support running server actions and transition stuff. Like, I end up talking to to Andrew and and Josh quite a bit. Sebastian is, like, more we're doing, like, architecture works, like, making sure that like, he he architect the app rider, as Wes. So we work the bench together on, like, Like, you start now, you start then, it can actually rerender the page, like the page that you're specifying like, seeing, okay, this this thing actually does make sense for my case or, like, it still doesn't make sense for my case, but maybe only the Wes serves our props for fetching data.

in the in the UI. And really that's, like, a hard problem. Right? So, like, in like, and there's many ways to do this, but, like, the the first thing that you usually do is, like, you go into, like, page dot d s x or page dot Wes. Usually, people like TypeScript nowadays, Yeah. It's really,

I could tag it. Like, you can you can go very, very broad, which is like show,

post functionality.

maybe That's it. So what that means is that now the the outer layer is a server component, One of the cool things that we're seeing now at, like, at this point JS that the like, some of the CMS providers, for example, are starting to look into

if you create a promise, that promise needs to fully resolve at some point, and and that needs to be tracked in some way, but I'm I'm not sure exactly. Like, I I'm not in Node this. Okay.

that is the the thing that we wanted to solve. Right? So, like, there there JS this, like, interplay between maybe I want to show, like, optimistic Scott. Maybe I want, like, day to day, like,

the whole freaking website was client rendered previously. Yeah. It's okay to go back to the whole website being client rendered as you incrementally. You opt in to to each of them. So, like, once you're at a page server rendered, then what do you how do you handle that that page?

the these, like, other components. Right? So you're you're passing into your header component, hey.

like, just for Next. Js. Right? Like, we we don't want to have, like, a primitive in in, like, Next. Js itself that is, like, it doesn't speed up things that much.

When that is done, I I see the state reflected that allows you to do to production,

Was that the do you see a lot of people saying that?

are are totally fine, basically. Right? So at that point, you're done for now. And then what you can do from that point on is, like, you you can say,

And then does this thing need to be memorized? Does it not need to be memorized? Because, like, the the other side of things, like,

I went from wanting this, like, Redux type store on on the server

the interactivity of, like, clicking buttons or opening menus or popovers or anything like that

to get the versions up and then get the site at least back to where it was before opting in to the new stuff, I think, is is always a a good strategy. For me, it was like a a mental hurdle where I was like, no. I don't want it. I want it all to be server rendered. But then I was, like, telling myself, Wes, when you have a fetch request that is off to get some data,

like, element that should be in the head to the head. Mhmm. Mhmm. So if you've used, like, React helmet or NextHat or anything like that before, feels more, like, than the natural And similarly, like, you're you're seeing, like, other, He even more than that we we would ever, like, have hoped hoped for when we started Next. Js, for example. Yeah. Which is, like, I can now do data fetch in my components So one example of that is, like, if you have a client component, So so maybe something like that. I'm not sure. Yeah. Okay.

cache API.

and then

React Native, that kind of

let's say you have, like, a a show. Right? I could tag it as a show. I could tag it as a show in this specific category.

Like, the the quick explanation is like, I I was talking to Salman on the on the Vercel team that works on the, like, Vercel website recently. I was, like, showing him the React compiler, like, side to side to to what like, if you don't have it enabled.

to do dupe in the same rendering,

happening? Because now that you can await a fetch before you render and that component can suspend itself

migration story, you already have a website, like, Syntax, for example, which was built on on Nextiva's, before.

say, maybe I need to start moving reliability from the Vercel for for this case at least until they, like, like, a network connection is bad and just, like, cancels and we have to retry and, like, all those, like, tiny, things that you have to think about. Yeah. All it's edge case all the way down.

inside of React team for some of the, like, server components and, like, And and we just knew that that wasn't, like, as reliable as we wanted to be.

And I know React 19 brought us a bunch of

it's like a a door

is server side behavior.

There's, like, SvelteKit to, like, revalidate the data and do fetches there and that kind of thing. That is, like, more like what we do. We've got service props. Right? Like, initial data and then you can, like, update it on the client side. Mhmm.

going back to the server and, like, getting some result back. And that's where we eventually, like, added

tell it to to go I don't know if it's it's telling it to go refetch it, or it's just giving it's bringing back the data,

And async context is the the official, It Wes, like, I write to the database. Now I need to get the the new state back to the client. Right? So now at that point you're, like, I fetch the API, I get a response back. Now I have to read the response Bos, like, like, explanations of, like, how is this,

the the fetching happens in the component and the revalidation can happen in the component. I don't have to worry about where this what specific page this thing is on.

on on the server.

well. And if you ever looked at the connections app, you you would see, like, underscore underscore next data, Similar to the rest of the industry, like, basically, what what is happening, the entire model is built on the other way around. Like, you're introducing Vercel components at the place where it gets service IP Wes. So that's, like,

And I thought, like, I'm not sure I need that anymore because you can make a server component fetch the data, and you can pass it to the client component via props, express middleware.

while implementing some of these features that that, React team has thought of and and want to implement.

And

some of my other, like, parts of the header, for example, like, header object. React uses it for the the the cache API as Wes. Like, the the new like, the the one that you can call, as part of, like, running on the server. So,

kinda like React Query Wes you can go you can tag them as much as you want, and then you can revalidate, meaning that, say, anyone on the client side or any pages that are currently open

But if you call resolidate pods at that point, you just told me about this, like, smaller graph that can just recompile changes.

Say. Yeah. The Async Local Storage API is really cool. So I've been working on my course platform, which was heavily reliant on

Zinguella love prior art on on looking at this, except for, like, what they build at meta as well, say like large icon library that is the like 10,000 are we ever going to have suspense? Like, that kind of thing. Right? Yeah. But MySQL admin type React component Yeah. And that's portable between, like, all frameworks that use React, Scott of components.

maybe if if that page looks like the the the shell of the page, like, header, the the content, and then the footer.

Mhmm. You you basically just take that that, like, page you had in the pages writer.

There Wes, like, a lot of, like, We could try it out for the 1st time. I really like React server components Yarn,

like, our teams ESLint Yeah. It's really cool to see the, So, yeah, like, the I can only do certain things on the server type thing.

to fetch data and and Or data. Pass it to the client. Yeah.

you've already improved the experience of your app. It streams in, Wes leverage all the the latest, like, compiler technology or, like, transform technology, like, SLBC.

The way that I've explained it to people is, like, it's kinda like React context where you can, like, pass values, like, somewhere higher up in the the, like, tree of, like, the JavaScript running. And then you can read those values further down.

The the the misconception that people have is, like, my Nextiva app in Page Strider is bad. I need to move to AppRider to then, like, move everything to the server.

no optimistic state, which is which can be the case as well.

I'm not sure why that is a blocker per se and, like, if that even is a blocker. Yeah. I wasn't understanding why that was a blocker to have it. But I mean, that's something to do with, like, rerendering. And, like, if you watched the recent both open source, so you can, like, view the the source code.

So that might be one of the the blockers. Because otherwise, like, if you do data fetching and you warp to dedupe it in some way, you just can't because it it's just not, like, tracking that in in this way. Mhmm.

And if we wanna have an entire show on on Turbo Pack at some point, I'm sure we could open that up as well. So Turbo Pack obviously is the maybe Scott, obviously. It's the rewritten

Yeah. I I love that API. I I don't love the page

to the other machine, to the other computer, which is the the the client.

to client. Right? You say use client. That's kinda I was moving my own website over to it, and I was like, alright. I just need it to work. So I I pnpm everything use client,

what does this router look like? How does this thing tie into React Vercel components? Like, And it's, like, more like, However, now you get all this, like, benefits of, like, isolation of environments. So you can, like, send this to your colleagues and that kind of thing. Yeah. Without actually bringing down fraud. Right? Like, changing things that that are, like, like, what when we released server components in NextShares, like, we talked so much about what server components can do that, like, the it was lost that, like, client components are fine and they're part of the same model and you should be using them still. Like, there's no reason that anything that you write Now with server components, that step is basically, like, replaced with like, as solid as it can be so that you basically get I could share, running it against, like, cold webpack would be even, like, better, obviously.

Okay. So, basically, you're you're taking your page, and you're saying, this page is is server rendered. Now I'm gonna opt in

directly to it. And I really like that because it doesn't tie me to a

Yeah. And

with that,

It's, like, the the get Yarn. We never had the post part. Right? Like, we never had the, like, how do I post stuff to the server? Yeah. We introduced API routes for that. So API routes Wes, like, pages API.

like, state or anything like that? for early, optimizations. Like, you're at some point, you're you get so into React so you get over this. Like, it's it's like this meme where where you go to, like, peak and then, like, back to to, like, not memoizing anything. Like anything. Yeah. So I guess, some point you're like, I know React so well. I'm going to memoize everything. I'm going to, like, mainly add use memo everywhere, The first thing you do is, like, you you add, because you already have this page with TSX or, like, maybe you're using pages writer and it's, like, index.js or something like that. Yeah. So you create this page GitHub TSX and you don't add use client there. What you do instead is you write a component maybe you're fetching all the data for the page, which is what you did in in get service props, synthetic props. You're passing all the data from the page, like, done into, anything like that, So now you can say in my server components, it it is continuously re instantiated, they they announced

And all inside of an encapsulated component? Because

it's just a fetch request with props.

like, images and scripts, And for that, we we work with React team and some of the folks that, that worked at Vercel on the React team as well to to basically figure out, like, what is this

and and that would have, like, a large blob of, like, all your data. Forget service or props. Service components and client components. Yeah. Sorry. I I wanna talk about that for for just a little bit because I think that's that's really neat. For the longest time, I was like, I really wish Next. Js would come out with, like, a state management

like, the new page as well.

to basically rerender the entire page. So like at that ESLint, it means that in single round trip, they they're probably shipping, like, 100 components. Right? But, like, if you look at some of the newer, like, libraries, like, in parallel because, like, Wes is limited to single core right now. You can you can add some parallelization, but, like, it it's not super And and we were, like, yeah, this move please try it out. If you have any issue, like, literally any issue, if it's slow, that that gives you, like, exposure to a lot of, like, different types of code. Right? So, like, it's similar to, So you make some changes, you you push them to, 1 half years ago for, like, the the initial, like, beta release of it.

This is the data for the header, for example.

thing. And and, like, a lot of the the, like, technical using SWC instead, which is significantly more performant, No worries.

you can keep going on that, but I started chipping away at it. Yeah. Yeah. Yeah. That's a great, when you're migrating anything

It goes into Sanity, and that's, like, the Yes.

or, like, a data fetching library or some opinionated way

so that was, like, one of the client's navigation optimizations like, juggle, basically. Like, head management, render the entire page again because there's new data. Right? Like, the data has changed.

You can still use all the features of React.

either updates the the database or updates some, before my React rendering starts, I'm going to get like like, the framework is going to call this function. And then, like, I, as the application developer, can, like, write some logic that gets data from from anywhere. So that could be database or, like, an API or anything like that.

at for sale itself. So, like, for sale JS using, like, almost always the latest version of Next. Js. Node. And it brings, like, issues with it as well because, like, obviously,

does the Next. Js team, like, work with the React team typically? Is that, like, a a really close partnership? Is it a You guys gotcha. Downstream or Yeah. You gotcha. What's going on? Yeah. What's going on there? Yeah.

And on submit is also not tied into React. So, once I throw an error in my on submit, it doesn't actually like, it it just goes into the void, basically.

I would say, like, overall, and, like, provide components for that. And it is fully portable in the React ecosystem as well disk caching on top of it, and things like that.

and you can go very,

on the server is amazing.

and you can clear that data with revalidate tag. And

and you pass all the props in same way that get service Bos passes them them in, like, that that we do in, like, Natchez's, internals, basically. Right? Which is just like you pass the props. Like, literally, you can just add the props object there. You spread on onto the, And that that one talks about, like, React for 2 computers, which is like I'm running React on Yeah. So it's it's kinda like that there were a whole lot of Hooks. Right? So, like, Yeah. I don't know when. I don't know I know if it's like, as far as I'm aware, they want to add it. Yeah. But, some of the things that are in my header era. Yeah. Right. Yeah. Like, I I just throw stuff on onto, suspense CSS and then you create a separate component that is just the the VNAV Wes, like, rendering before. Yeah. And that separate component, you add use client, It it basically does memoization for you, automatically.

client components, And you like, what problems have you hit so that that you need to build TurboPack?

on on, like, this API that can span the Vercel, client, server components, client components, edge, like, whatever you run into.

what happens JS I'll have a middleware where I'll attach, like, a user ID or I'll attach, like, a country, you know, and then I'll move on to the the actual handler, and then you you assume that data JS in the request. So I moved a lot of that out of sticking it into the request and and then pulling it out. I moved that into the async async local storage API

we no longer need primitives for for, like, data fetching. Why don't we also have primitives for for, like, mutations? Right? Like, how do I and install the compiler. Because, like, compiler right now is in in beta, so we want to make sure that you can upgrade it yourself so you can get, like, the latest improvements to it whenever you want instead of, like, being in lockstep with Next. Js itself. Yeah. That doesn't sound too painful, specific constraints that we have that allow us to to basically say, Yeah. It it's literally cookies and headers. So you call cookies or you call headers, and you got, like, a cookie store, header store back, React ports, for example.

work in in the same way if you need to, like, across the this rendering, basically.

Josh was part of the keynote, the lesser known one is that, so it doesn't fix that, I think. Or I'm Scott a 100% familiar with this. So, like, don't pay me down a little bit. The I don't think it fixes the the context one, but it does fix the the other case, which is, like, prop drilling. So Yeah.

And that's why we introduced, like, refill and this is Nexa specific. So, like, we found late pod, we found a tag.

I can pass data to my client components. Right? I can pass data to the browser, for example. Even though there's still, like, random HTML on the server, I can just, like, pause, these props that I it's similar to what get started to prop Right? So you you just, like, do some data fetching and you pass it to the browser as

specific page. React server components where

There we go. Thing.

because then it's just as long as it's in the call stack, right, it's it's available to you. And and Next. Js uses that as well for, what, cookies and headers? You simply just call Yep. What's the API?

better API for this look like? So there there was, like, some prior art, like, Remix loaders, that that have, like,

everything

who works on the Wes at Vercel.

And that door is, start compiling where you actually request, like, a page and we only compile the the stuff for that page. For that, gave a talk on, ESLint components, compiler can figure out, you just write my, like, product logic and and, that you could just couldn't make it work before. Like, there was only like, the only way that we could do it was, like, making it part of React itself. Yeah. And and that the reason for that is streaming. So, like, for rendering the entire page, it was fine.

Yeah. I had a Wes. You mentioned a couple times that, you know, working closely with the React team, and I know that there are React team members at Vercel. How how tightly

Awesome. Well, thank you so much for for all this info. I don't wanna keep you too long, so we'll move into the the last section we have here, which is

in in Rust, you can, like, basically annotate with this, like, function directive as the complexity of, like, JavaScript like, suspense and transitions and, like, async transitions, for example,

and that means we have to compile all of them. Right? Like, that kind of thing. So and the inner, like, component you're rendering in that server component is a client component.

that just never did that. Right? And they just like they're like, yeah. My compiles take, like, a few minutes, and then, like, it's live. It's still, like, magical. Right? Like, Mhmm. It's one of the things that drew me to to working at Vercel. It's, like, They're just plugging Sentry here.

It was just, like, too complicated from the start. Like, we tried to make it very similar to, like, pages rider with, like, automatic static generation which means that React can hold off rendering anything it can memoize your j s x as well, for example. So, like, in some cases when, makes sense, but I also didn't think it makes sense for, Instead, what we do is we we only, like, Next Genes SDK team, which is, like, new features using, like, React 19, do the entire cycle. So, like, the entire cycle is I render a page, you, like, you request a page, I give you the page and now context stack.

with Nexus today,

It it knows when to rerun Wes you, like, do this IO, for example, and it it just, like, automatically works out of the box with that.

But now Sentry can actually reason about the system, has been doing some contributions to Next to basically allow us to, And what we did for TurboTax is we started out with plus, which is like, You can even, like, use the server components to seat the data in and then, like, have, like, SWR, React Query, or anything like that Yeah. It's, it's definitely a hard it's been a hard one to explain to people,

that I've talked to that that are slightly younger than me, like, literally slightly because I'm not that old, but, Mhmm. Mhmm. Why do I need to know about this used client thing? Or, like, what are client components even? Why is this a new thing? And, like, those were not even, like, the new thing. Right? So they they were, like, the thing that you already had.

and and, like, And they're all not integrated to React. So, like, React is not aware of, like, any of that. Yeah. It it just, like, knows about the on click or the on submit.

And then, I move it Deno one one more level. Right? So, like, now we're Deno to probably don't want to use it. I just use the, like, latest React, instead.

I I'd never thought of, like, Apify before, and, like, I opened it once, accidentally. I was like, this is interesting. There seems to be, like, quite interesting, in in the amount of modules that get processed. Mhmm.

We we don't have particular like here in the Netherlands, because I'm not from the US, like they don't have like specific like sci fi channels like the the sci fi channel itself. Mhmm. That kind of thing. It's like a lot of that JS it's, like, on Apple TV. Oh, yeah. I don't think I realized how many different sci fi shows they had because I I guess JS silo considered sci fi or, Yeah. So it will depend. Like, if you if you have, like, smaller apps and, like, like, smaller component trees, like, it's less likely that you'll see problems per se. It's it's more of an, like, optimization that you just get for free.

Yeah. We

So love to see it.

I bet. Yeah. Yeah. I wonder if they have the serious data on on podcast listens too because I know that Hollywood Scott Queen podcast was really

from turbo So that's what we're working on right now, to have, like, persistent caching so that if, Scott starts to work on the syntax website, strong opinions on what form library to use or, like, how to call forms. Like, what we told you instead is, like, be interactions that involve the server. So, like, things that are, like, submitting a form or things like that. So we never had, like, 1, 2 seconds before you see anything on on the screen. And if you were unlucky, you would get, like, a much larger recompile and and it would take much longer than that even.

In order to do that, like, to to coordinate that, like, we have to manually coordinate.

I'm not sure. Like, there must be someone in, like, Apple HQ that's like, I I love sci fi anymore.

Mhmm. We we've been around,

What you get with, like, having this caching layer is that now anytime you make a change, we can quickly recompute, does this thing need to be, like, what thing changed and what thing needs to be recomputed? like, making sense to me now in in, like, my particular case. So even if you're building, like, an SPA, you can still leverage, the, and then the thing you have to do in next is that, like, it JS using And then we can send it back and update the, the the page in place.

for, like, pretty much all changes, Like, that kind of thing is all, like, handled by React itself now. Mhmm. And that brings many benefits. Like, one of them is, like, that you get, like, payload CMS is, like, APIs and does it actually make sense and and that kind of thing.

Because that, like, graph of So the

I think his name is Luca.

that that was, like, one of the interesting, like, wins that we had in, like, comparing it to to, like, Get service side props is, was just like a way to say,

not blocks on recompiling the code itself anymore. Like, they're gonna be, like, blocks on, like, static generation being slower or things like that. So you put that together with Turborepo, which may skip all your Npm installs and all that, and you could potentially be having, type thing. Like, this one is done. Now we need to trigger this other one.

It it's about Sanity, actually. So Oh, okay. Let's hear it. I'm not sure if you know, and and they're, like, moving to the parallelization JS, like, a big, But you do get some benefits from moving them down like, we have this door to from the the server to the client, but now we have a door back from the client to the server.

In order to get there, we need to take your module kinda like express, basically. Right? And that allows you to, like, write some logic that's, like, update the database.

which JS, like, a single, how can I provide better components? How can I provide, like, RFC enabled,

our

like, FTP like builds and things like that. So I'm excited for that.

And then we'll shift to, like, as JS you probably know Node maybe another one knows, client components render on the server as Wes. Yeah. To render HTML to to basically speed up the initial render.

Yeah. Like, caching for disk, that kind of thing. And then we can build, use some of the, like, newer vendors that came out or anything like that?

left so far

breaking things. Yeah. Beautiful.

with a cache, like disk caching would actually be 10% slower than And now you might be thinking like, oh, but this might make sense for builds as well. Right? Because my builds are in the cloud and Yeah. Maybe they can, like, store all that and then, like, restore it and make my builds almost instant because other components,

UI libraries. So, like, URL libraries, you might you might think of, like I grew up in the, like, FTP It definitely feels like the React's gone. So, like, if you're into React, I highly recommend, like, watching literally all the talks, like, the in the entire live stream, which is, like, 8 hours long.

Oh, really? Documentary and things like that. That. Yeah. Those are Bos as well.

So

by the by the creators of the fire festival applications keeps growing, like, applied on the on the client through, like, fast refresh or anything like that. Okay. It's like one of the the So Luca on the, like, Sanity, I have 1 more, shameless plug as well, which you'll you'll like. Yeah.

And the way that this works is that

foundation for all of mankind in creation?

When we released Next. Js, it it was initially built on Webpack. And this JS, quite some time ago. So 2016.

like wind down the server. So you you, like, control c and you just go ahead with your day. And the next day you come back and you start up again, you have to wait, like, this initial compile time again because there's no discussion yet. Now when we have this discussion, you can just, like, go from the point where you left off. Right? So, like, the the last time you ran the the compiler.

That that site but it's all Vinay made a lot of deals with, like, book, authors as well because, like, they're just based on the books a lot.

and then you wait for 5 minutes, which is, like, what you would get with some of the, like, initial, like, versions of, like, compilers that were built on top of webpack, for example.

deploy on the edge or Node chairs, and then, like, there there's, like, just, like, a complexity But in practice, you need React 19 because of, like, specific APIs. There is a polyfill for it, but, like, generally speaking, both server and client compilation in the same compiler.

So what what we started out with is, like, we're we were basically evaluating, like, does it even make sense to keep, like, running a Next. Js or or, like, running Next. Js on Wes or should we

if you're changing, like, client coupons, it's, like, near instant, basically. Right? The problem we had with Webpack was that, like, it's not near instant when you have these, like, 20,000 modules or 30,000 modules. Yeah.

and it's all up there now. Mhmm. We're we're definitely, like, listening to to feedback there.

changes is, like, massive in in the the Webex case. So, Now Wes need to process those 10,000 modules for the server as well as for the client because they're in different conditions. Like, they they get, like, different optimizations. They need to be, when we look at the complexity of maybe, So what you do at that point is you say, Wes run 1 for the the server, 1 for the client, and 1 for hatch. Like, hatch is the, like, special target where where, like, you get a slightly more constrained environment.

like, some library name

And that means we have to process all of them Maybe you want to feature basically on top of the React compiler can just, like, take your original source Node. It can basically optimize it in in various ways by, like, memoizing more bits. So it's not just the, RC like, override particular, like, fields in in the CMS, which is really cool to see as well.

and then you you've, I think it's, like, part of that, actually. Like, the the React React cache doesn't And and Node just for the like, the the basic case is, like, I have a value that is, like, derived based on some state or some, when you're writing an app that is, like, I I get, like, a a prop that I'm passing through, for example. Yeah. Anytime the prop changes, obviously, the component needs to render.

And the what is the the source maps is is one thing Sentry is spending a ton of time Mhmm. On, pushing forward in

the caching layer. Like, we we need to have, like, a task runner caching layer that is, Yeah. I I think that started with the get static props, get service props already a bit.

sick picks and shameless plugs. I'm not sure if you came prepared with those.

like, the idea was to be we create a single module graph

like, error that happened on the server as well as the thing that happened on the ESLint. So that thing you saw on the ESLint. So you can actually mark the session as, like, this is the error that was related to that particular, like, digest. So you can search for the digest in in the UI as well, which is pretty neat.

that particular,

and potentially in the future also Yarn of the Deno, because they recently rewrote everything in Rust.

engine and that makes it cache by default automatically.

like, the Hollywood con queen, started watching recently, which JS, features of React that are, like, enabled by this, like, transitions and and things like that.

like, series on there. So, like, silo JS pretty good.

Well, that yeah. That's the case. So, like, we we can do that with TurboTax as well. Nice. Once we have TurboTax built Yeah. That's something we work on right now. It is, like, 83% or it doesn't need to use client because it, like, it doesn't have use state. It doesn't use, effects or anything like that.

And Next. Js has been running on webpack for for very long.

as well as all the complexity of, like, extra bundling for Vercel components, client components, like, multiple passes.

Yeah. The the idea is So for production builds are going to be A lot of it's, like, ironing out, like, like, So instead of, like, having that specific, like, export function, get service props, async local storage is a way to basically pass data across, like, the the async, maybe that 1st component that that is using the props is also not interactive. It doesn't have use client if you've seen, like, Josh, might not be working pnpm every day. Right?

thing that that happens, like, like, these NexSys apps.

implement caching from the start. It's like one of the issues that, like, Webpack had from the start was that they didn't start with, want to submit and only show, like, the new state once it actually is fully done and rendered.

tweet at me or, open an issue on GitHub. We're actively working on it. We we have, like, 30 open issues, like, ASD transform, basically. So on that side, like, it means that we have to add Vercel, because, like, we we've been on this journey to to move away from bevel for for the What that means is that if you want to start migrating, the 1st place where you start is Node so much to, like, search or, like, submit some form or anything like that.

more, is, like, shown or something like that. But We can't do that on the server because, like, obviously, the server, like, doesn't have this interaction model of being able to, I'm going to introduce suspense boundaries to show more, like, loading states in my page, for example. My content can come in later than the header, for example, that kind of thing.

pretty quickly.

just giving people the the thing that they want to to, like, build better websites. Besides that, yeah, is an RC for development now. So that means we we disabled most of it, a full React render. So that means,

I think I have, like, 1. I'm kinda into, bring, like, fast refresh down to to, like, sub 100 milliseconds or so. Oh, yeah. Oh, that's awesome. For

Oh, that's awesome. Yeah. We'll we'll we'll ESLint, that up as well.

webpack in Bos, or it's the succession to webpack.

as you get, like, more and more modules into your client components, into serve components, that kind of thing. So we really have to build, like, a a solution for that one is the one that is doing the get server side props or get server side props that you previously did.

of Webpack itself, of, like, some of the the newer vendors even.

Awesome. Well, thank you so much for all of your time for coming on. Thank you so much for Next. Js,

working on it JS well as coming on today to to school us on all of the stuff that's going on with React and Next. Js. Appreciate it. Thanks for having me. Alright. Thanks, for the longest time, I was like, can they please do this? And then you don't actually know that it's it's re rendering. I mean, I think a lot of people Yarn probably have code in,

powering, that has, that has, like, a similar, like, actions type primitive.

there there's some pretty good stuff there. So if you're interested in in sci fi, Foundation is really good as well. It's it's definitely, like, they keep bringing out, like, more of those.

So what we do for webhooks is we run 3 compilers.

like, he makes some changes,

JavaScript in general.

like, over these 7 years is that people start building larger and larger and larger apps on, response wave of 500, what was called React float, Wow. Yeah. It's it's, it's pretty crazy. Like, overall, or suspense, at that stage. So at that stage, you can say,

on on these frameworks. Right? So like it's not just on action, it's also on, like, Nuxt and other frameworks. Mhmm. So what we see is that people just end up pulling in more more modules, more Npm packages, or, like, specific You don't have to do that. You can just use, like, client components. Client components are fine.

all of, all of Turbo Pack and,

But in order to process those, we need to compile all those 10,000 modules and then say which one JS actually used. And, like, skip like, if you count it, like, skip over a bunch of these. Oh. And sometimes you do, like, import star as, main things that, like, we we ended up contributing to React itself. Async So what you can do it at that point is they can move the data fetching further down libraries that do data fetching,

it would take until the point where you're like, it doesn't really make sense anymore to do this.

about controversial Yeah.

as they say, in terms of framework land. Like, we we survived for a long time.

like, maybe those, like, for the browser needs to be Wes 5 or just, like, the the server can be, like, whatever. Like, Node just firstly running, that kind of thing.

allow Sentry to to reason about service and errors. Yeah. That are then sent to the client with a special, like, digest. I'm I'm not sure if you've seen that in in actions, but, like, we need to hide, like, all the the data. Because we don't want you like, a service error, you don't want that to end up in the client because, like, in some cases, that contains anything that could be secret. Mhmm.

for some reason they're just keep they keep putting out more sci fi series.

Century's doing a lot for for that, for I know you guys did some work on the hydration stuff. Century been constantly working on getting better hydration issues.

But the, yeah. So that was, like, one of the things that I was really interested to see. And this is without us having persistent caching ESLint.

They're now also getting, like, into the the, like, documentary we're the 1st ones to hit bugs and and that kind of thing. Yeah. But man. Yeah. In doing so, we also can prevent, like, other people running into them using, like, early release, cycles and that kind of thing. So And it can just process all of these modules,

that was one of them. And then the other is that most of the things that people are complaining about are not recompile times actually. It's it's the initial compile. Mhmm. So which is like, I boot up the server, I go to a page, how long does it take me to show that page? And we were compiling those on demand. Right? So that means, any, You put something in there, you get, like, a Node. Js request response handler and then you can do

that you can import.

So that means that anytime you make, like, initially initial compile, it still, like, compiles all your modules. Right? Yep. But then when you make a change, it can just, like, recompile only the CSS or it can recompile only the, like, tiny part of the JavaScript that needs to be recompiled and your module is like importing,

we initially coined the get initial props pattern where you can Node, like, slightly deeper in the tree while the rest is still ESLint components. Then So one of the very interesting things is that it's a one way street, like, like, anything we want on top of that. So we we basically build, like, a library called turbo engine. Mhmm. Turbo engine is the thing that is, like, to also have, The only difference is that now React has this primitive that allows us to render on the server only, which is, like, something that we couldn't do before.

the misconception is, like, where you start migrating. So, like, the the the Wes you start migrating is, like, usually people are like, I'm going to use this for this small component on the page that JS, like, like, a button that doesn't need interactivity, right, or something like that.

I want to use Scott. Right? Like, let me call use state so that I can, like, click this button and then, like, something So what you can do at that point is you can introduce suspense boundaries, one great example is, it will call that server action, which is, like, a function that runs on the server.

like, like, the like it's said in the Node, but, like, you render React components on the server slightly different from what you did before. So, like, Nextiva's, since the very first version had, service at rendering.

However, the, Service at rendering is, like, taking React components generating HTML.

All of them were super high quality. I did it, myself. Don't do it in 1 1 sitting, I would say, but, like, generally speaking, So what you do at that point is you just move the use client, like, deeper and deeper before, like, development is fully Deno.

There's a much better and, like, deeper and, like, more high level explanation of this in, Deno talk at ReactCon. Pnpm definitely recommend looking at that.

And I it can pass in, like, props there and they can be the the goals Wes also to and then automatically trigger NextGen to basically say, hey, and then import another component and in that component you add use client.

we're we're finally at the stage where, like, people are, like, coming around to it and and they're, Yeah. It's it's definitely a a long journey on a Webpack.

What what's the path? Like, what do you recommend for somebody when they're moving over?

2 computers. Like, 1 1 computer is, the, like, the server, basically. And it like, it doesn't start out there, but, like, it that's where I don't want to spoil the the entire talk. But it's like you basically end up with, like you have a like, 1 computer is your server. The other computer is, the the browser, and you can move logic between them and upgrade to React 19, It's purely based on feedback, there's many ways to do this. But, like, you can say that they didn't have the ergonomics that you want, eventually, like, when you're writing this code. So they were, like, created in a way that you can, a live URL. So it's something like similar to how you did it with the the FTP, as well as having persistent caching. Yeah. It's like parallelization we have nailed down and that works. What is really interesting is that for for the Vercel website, what we saw is that, on on some of the slower pages, and then I do some mutation on the client side state. That that model is fine overall. And, like, if you have an external API or anything like that, you can still do that with App Runner. Like, there's nothing wrong with that as well. Yeah. You can totally build that.

to make it easier to, like, schedule work and things like that. What does that look like for somebody who has built an entire application that is it some tags. You can tag it as, like,

and

interactive as well. Right? You can add, like, interactions using server actions or things like that as well. Yeah. It's it's really exciting to me that that the React combiner is now having summary acknowledge, like, I can manually add them and, like, make rendering better. Right? Like, the don't rerender this thing. But it goes much further than that. So like it it goes into And how does that tie into the server story? Right? Like how does this tie into really hit. So I wonder if they saw that and were like, oh, this would be a good docu. Cool. Awesome. And shameless plugs, what would you like to plug to our audience? The Turbo Pnpm RC or, like, the, yeah, the Turbo Rec RC. Yeah. So we we have the Nexus 15 RC, like, it was a research project by Tobias. Like, the the original story of of Webex is pretty interesting as Wes. But, like, it turned into this thing that everyone used, but in in this, like, from the start, it wasn't built to be this thing that everyone used.

in, like, whatever way you want start across, like, parallelizing across, like, many, CSS.

like, people who build, like, websites for clients are they're still saying, I want, like, the WordPress plug in experience. Right? Yeah. Right. And that has always been really tricky to, like, move to, specific,

at this, like, granular level per se. It's more the the outer layer of the of the app. So when you start migrating, the first thing that you do, until the CSS is actually loaded. Yeah. And that was, like, one of the issues that we had a ton because, like, we would inject into the into the hat, for example, and then, like, we would assume that it is loaded at some point, but we can't really, like, hold like, we can't tell React, like, hey. Don't render. Right? Like, React is in charge of rendering. So a a bevel transform today.

it's client client hydrated. Right? And they say, okay. Well, now I wanna start opting in to to server components.

like, framework API. So, like, ReactCon sci fi series. Oh.

or, like, deeper into the React tree.

like, step before that that basically replaces everything that you did with get service or props, get static props. And then, like, it's able to render React team is pretty large. We end up, like, talking to other, like, people, And if you're into sci fi series, I highly recommend Apple TV,

we'll be now be able to ship components that define how does it work on the client, how does it get its data, and how does it render on the server

there's, like, new constraints on that environment. And and that was, like, what what was, like, that is the the page itself.

like, obviously, like, when when we just released it, there there was, like, a lot of, like, pushback. Like, oh, things are getting more complicated.

because everything is 1 rendering model. So you're still using React. You use, like, pretty much everything that you're familiar with.

as well as, If you call those in the server action, what happens is that once you, like, add a form that, like, takes your name, for example Yeah. And you click submit, for the 1st, like, iteration of it, you're done at that point.

like, the the talk that Dan gave clarified, like, circumstance click for me now. It's, like, the general thing I I heard from people.

And those, on the surface, it sounds like an easy problem. It's, like, I just fetched the API, set the state, and then it's done. But then you forgot the, const a is 10, like a string or integer that you put in.

And, like, one example of that is, I can in in, like, Instagram and, and which other places at Meta to, like, really, like, dogfood, So we we end up, like, talking, However, we also wanted to provide, like, a better way to Maybe I I'm I'm not sure if you've seen that proposal. It was basically, like, to be, partially server components, partially client components.

That is encapsulating both, like, ESLint side behavior as well as Vercel side behavior.

but, like, you can still use JavaScript as well if you want.

I can write components, those components can do data fetching, and they can render

I think that's where a lot of the frustration from people go because they go, yeah. Oh, yeah. I'm gonna start using server components, and then you import something that has a hook in it or is is meant for the client. And you get all these these errors, and and people get really frustrated with it. Right?

online. So Wes released, server components in Next. JS, like, one and a half years ago or like slightly over 1 year ago now.

the React world. But now with this idea of, like, yeah, you can pnpm install something, and its batteries included for all of that, maybe pass in tokens or auth or something like that. That's it's pretty exciting to me.

maybe a Next. Js,

features? Like, optimization

And then we pass those as props into the component.

so one example of that is, like, Remix is looking into server components.

one of the things that people

build a, like, Once it goes stable, But now that we have, like, streaming, like, has a reasoning about, like, Vercel AST. But it could also support, like, SOBC in the future or, like, any other, and I'm pretty sure I'm not leaking anything with this. No. No. I've I've asked publicly before, and they say, yes. It is the plan to make them work on the client as well. As far as I remember the late I am not fully in the know of on this, but, like, as far as I remember, the latest, like, blocker on this was a async context.

That unlocks some other, benefits. So, like, one of them is that you can now do data fetching on the Vercel, whereas Wes you don't need, like, special,

So you can, like, pull that in, give it a config, and a config is, like, unifying your React components, and it could be, like, client compo like, client components as well.

building their entire editor as React Vercel components with server actions and and all that. So what they allow you to do is, like, they they allow you to bring the entire CMS as a React component.

React Vercel components is more of a, it's it's just an additive, which is like a hole to the the other side of the, And React transitions was, like, specific thing that we we had to add support for, like concurrent rendering, that kind of thing.

It's just like, That's the React team at Vercel. Right? So, like, there's React team itself JS, like, many, like, external contributors as well as the the folks at meta that are working on, like, React Compider, but it became, like, complicated in the cases where you do want to be dynamic. Right? So, like, they're just, like, better like, my my database is Node. My my API, or or, like, if that if that's at all possible. It doesn't have to be that way. Right? Like, you can also say, I'm still going to do all my data fetching at the top.

at all.

And instead, start, like, a a registry ride or something like that. That that's already been experimented with by by the team as well, by the React team. In practice, like, if you're using Next. Js, all you have to do is upgrade to the the React 50 or the Next. Js 15, I think

like, state being minimized or, like, specific, like, derived, like, When the React compiler goes stable. Right? Because right now it's, it's still in beta.

That is just, like, constant. Right? Yeah. It can actually, like, reason about that and, like, move it into the place where it's used instead of, like, having it in the, like, the function scope where

like, optimizing it.

are you able to give us a a quick

in front of you right now. So it's, like, just things that you would never do yourself or, like, usually, you would never do Vercel or you're at this, like, peak. I'm going to memorize everything.

like, not exactly, but, like, that is the the conceptual way, you think of it if you don't have the playground, Turbo Pack doing everything from scratch.

make sure that those cases are also not rerendering in this case. Okay. That's that's 1 question I had, and I I haven't been able to figure this out is,

because of the, like, rerendering, for example.

Important thing to Node is, like, it's not a bevel trend. Like, a transform in the sense that you would usually think of, like, I'm going to take my input and give some output.

I thought this is always, like, how React worked already. So why are you showing me Yeah. This new thing? So, like, another way that I look at it is, like, Similarly, like, Sanity is doing something like that as well.

which is something that they'll just tell you to to upgrade because, like, we we also depend on that. And then, you have to enable experimental React compiler through we're we're basically, like, hitting these limits of we we removed so many, like, features from Next Wes that we freeze that to mainly, like, ESLint set interactions, like, state and, like, effects and, like, on click and Yeah. Kind of thing. Or it could I'm not gonna try anyone here, actually.

like, parsing and,

If you're using AppRider, you don't have to install, like, React itself because we we ship with, like, the version of React that that you need. Mhmm.

you're probably one of the top people in the world who's who's heard so much of the the feedback, good and bad, from, like, 2nd deploy times?

they're basically the things that you would usually, like, call, like, use malware for that kind of thing. Those are the things that I can transitions were were, like, Node that, like, Andrew works on a bunch.

React server component world. And, also, I think there's, like, a lot of confusion around in around what it is. So

And if you look at the like, there's a playground as well. That one shows you each individual step of the compilation and, like, how it optimizes it. And if you look at the output, it's just, like, output that you would never write yourself. Like, it's it's stuff that is, like, TurboPack or would turn into TurboPack, So what you do initially is you're passing, of test passing on on the Nexus, mother repo. Wow. And, way of you you would expect it to go, which is, like, I'm not using this prop here, so it doesn't rerender, but actually did rerender previously.

to take advantage of this stuff once it is launched? Or are people going to be able to use this with whatever compatible Next. Js version with

And then unless you're using, like, a used callback and, like,

Yeah. Yeah. That that's always been a bit of a hang up for me on on React JS that you have to know about these little gotchas Wes, like like you said, like like, you have an application, then maybe you have, like, a sidebar, a navigation, and you you pass a prop, maybe, like, current page or something like that into, the your application,

it makes the assumptions that you had around, like, how React renders a bit more, like, the the reality with the compiler.

it gets really complex really, really quickly, and I'm I'm really glad that it will just do that tricky stuff for us. Yeah. And let's take it back

production right now where they don't know that they could possibly and and maybe this is the next question is is like, what happens if you're not using this type of thing? Is it performance issues?

state as Wes, but it's more like in the,

like, when people have, like, context,

one example issue, define a a variable, like,

the React version when it's fully released?

But then, like, if the prop is only used in, like, Node place, for example, like, in like, you have 2 components that are next each other and, like, you only pass the prop to to this, like, other component. It would also rerender the the 1st component that doesn't use a prop because of, like, completely rerendering the entire tree under the component. Mhmm. With these changes, it doesn't actually do that anymore.

For sure. Like, you you have to, so it's using some APIs that are in React that are also not available in, like, React eighteen, for example. So, like, you you'll have to use React 19. So, like, today, you have to install, like, React 19 RC.

That's one thing that I I don't think a lot of people don't realize is that if you have, like if you need, like, a little function inside of your component because, like, you like, handle submit or something like that. Right? If you define that function inside of your component, which a lot of people wanna do because it's you have access to your state and everything else there, and you don't have to pass it all in, then every single time that component is rerendered, then that function is reinstantiated.

compilation, for Next. Js, Just give it a name, basically. Right? And then server providers are the fully new thing where you had to be like,

It does generate some output, but in between there's, like, a different combiner that is, that is what I was saying. Like, it except for server components, because server components also needs to render, like, on the server. So we re re re enter the entire page. In that case, However, then you have to model this, like, logic of, like,

your idea of what React Server Components is and and how we should be approaching our applications?

you you put the context in, like, a provider. And when the values in context change, the entire subtree of context will will rerender itself. Right? And that's always been the thing. It's like, oh, don't put context too high, but then I tell myself, well, I I kinda want it high because Yeah. I just want my data where I where I want it, and I want it to figure it out for me. Is that something that the React compiler is going to fix for us? before you return the value? Do you know when and if we will get a sync client component?

Yeah. Awesome. Let's talk about React Vercel components. I'm sure that

in on preview and it's coming from the React team, does does Next need any modifications

On larger apps and, like, that was the case that they gave for Instagram, for example, that it would just, like, output code that is more performant than any, like, engineer going manually, injecting script tags, injecting, CSS.

in, like, 2018, you can submit new data, update the database So eventually, we we started building, like, data fetching on the server and on the ESLint. And then, like, later on added, like, get service Node, get static props, use memo on my JS and, like, as you've probably seen, like, interactive components that are like, the ones that you wrote before. So if you're familiar with React, like, basically have a React's combined income. Right? cases that you can model in this way. The only thing that was missing was, like, a primitive for, like, optimize these very large graphs and, like, make sure that everything is, like, processed in a way that is, reliable as Wes? we need to start streaming the head early on, but then we need to fill in, like, the the blanks later, basically.

like, anytime you start building, like, compiler that transforms the original source code into something else, they're they're really cases and and they're trying to catch all these cases. So, async local storage, which is not local storage.

that's why it's, like, released early so people can try it out. Okay. I mean, like, what it what is it? Which is the initial question.

like, incrementally get rid of them if you were to build a combiner, Vercel, like, there's, people that, And adding a feature into React for that was super, everything that you already knew, to, like, work on builds as well and, like, bring you that, like, persistent caching and, do some kind of, like, I don't like, get service side props, get static props.

Yeah. So, like, render and then, like, rerender at some ESLint, for, like, individual file compiles.

Vercel, Next. Js, coauthor of Next. Js, to talk to us all about

I know I know, you know, this is a React thing and not a Next. Js thing, but I'm sure you all are very tightly integrated into this.

React Hooks were introduced, we're basically shifting the work from, like, you boot up the server, but in the same request, it can actually give you back the entire rendered, like, news, like, some input values change, only a part of your JSX tree needs to change. Oh, okay. And it can, like, automatically I mean, like, personally, and then applied it on the server, And usually that 1 head gets static props to get service type props. So the way to think about it is that the component you're adding JS, like, page. Tsx, it it eventually was named actions. Right? So, like, how do I do some action that to Next. Js for a second too. Like, given that you said this this stuff's all in

Welcome to Syntax. Today, we have Tim Neutkens on from

That's really what the React team did. So they they went, ahead on, like, a pretty long journey. I'm not sure exactly, like, how long they've been working on it exactly. Many years, I think. Yeah. Something like 4 years, which, which also causes, like, people to to doubt, like, we'll ever, like Yeah. Come. Right? Like, is 2 ways. So the interesting thing there is you you can, like, pass data, not secretive at all. It it's just like, yeah, we have some folks like Sebastian, Andrew, and Josh that work on the React team. It's a separate team. So it's not part of NextShares, in the in the org chart, but we're, like, next to each other in the org chart at Vercel.

Yeah. Well, I mean, we could start off with some of the the hottest new stuff, which, I guess, is the compiler.

So, you know, I Wes, first and foremost, What does the React compiler do for those people who might not be aware of what it is and what it does?

everything that's going on with React, with Next JS 15, with server components, with React Compiler, with Turbo Pack, kind of a lot going on in the whole this whole space recently. So I thought, like, let's bring him on to to talk about it. So welcome, Tim. Thanks so much for coming on. Yeah. Thanks for having me. Where should we start this off?

use state, use memo, I think at least that's my opinion on on, like, migrating, you wouldn't have to think about this anymore. And, like, there's,

keynote, if you haven't watched it, I'd highly recommend you to to watch it because it it's definitely

that kind of thing. We're really, like, in the end, like, especially

And it's in, in beta, so you can, like, try it out. They didn't recommend you to ship it to production yet, but they are shipping ESLint production themselves, some optimizations that it doesn't do today, but there are some that that are like, when you, like, put in some input Node, you're like, by the way, this is things that I could have done myself, but I I'm actually not doing. So, like, saying Wes, that was, like, collaboration between React team, Nexia's team, and, like, a bunch of others, The, Redwood folks are looking into server components. And, like, at that point, you before the the actual, like, like, client components rendering.

now in the, like, last few, like, 2, 3 weeks ago, But what it means to practice it instead of 10,000 modules, you're processing 20,000 modules. Right? And and that, like, stacks up really quickly