Next Gen Fullstack React with TanStack

The React ecosystem JS just dominated right now by Next. And then anything that's left over, like the shavings from the Next Feast, go to Remix or maybe Redwood or something like that. I don't know. Like, ever since create React app was deprecated, it just feels like

And this Vite environment's API, does this mean I've I've not heard of this before. Does this mean that we have Vite for the server then, like Vercel side? how is it virtual scrolling, which is like, it literally depends on what it looks like,

which VINCI kind of stepped in much earlier and said, hey. We're going to simulate this environment's everything with Next. Js. Right? That's because the root is an RSC. And that's why I just think the rooted r RSC approach is not the right one. You what you what you wanna have is leaf nodes and composable RSCs that you can you can say, you know what? We've matched all of our routes. We maybe we're doing nested routes, so we have, like, 3 or 4 nested routes that we've matched. Each one of those could go off and trigger an RSC can solve a lot of that. So, that comes through in every single middleware like, every single middleware underneath it and every server function that consumes it will now have this context dot whatever you return, user, user ID, email, whatever. And it's type safe. It's there. So if you try and reference it without the middleware, onto any DOM element that I wanted.

like RPCs, API routes, that kind of stuff around it, so the ability to do server only things. And other than that and, like, the bundling and deployment stuff that you get with Nitro, Stale data.

that all the time for something. So the 2 good use cases I I always bring up is authentication is one of them. Yeah. JS the user set? Yeah. You you never want to just let your junior developers have to remember React elements or JSX.

And VINCI will probably still stick around even though the environments API is coming out, but that that's kind of how it all came together.

JS moving to Vee.

my apps, just for, like, 1 screen. So lots of tables, most of Scott is 10 stack router.

Why do you think that is? Because I know it's big in in Vue land with Nuxt.

React server components, or is it your own server

all the 11 o I don't even know. I have a whole talk on these different runtimes, and I don't know which ones specifically, but I know that many of those are are Yeah. Included or on their road map. So Okay. So when you were when you were planning on doing something like this, was Vite always going to be the plan, or or did you have any other options in mind?

Oh, interesting. And it will it'll literally run

I don't even know that much about Nitro, to be honest, because it's proxied by Vinci. But Nitro is, the utility that powers Nuxt,

Kind of. The environment's API is, it has a lot of things, but one of the more impressive things is that it can actually simulate the right cloud environment that you're gonna deploy to in development.

and Next. Js just, like, as our state manager for all of the different libraries we build because 35, probably. Yeah. 35, something like that. It was it was old, like, sucked, And it was Oh, yeah. It was really difficult. Like, I I didn't get very far with it. It it was mostly for, like, So like server functions and extraction, basically, they handle

everything else is just isomorphic You're partially applying it to some components, to some elements, and then you're shipping that partially applied JSX down to the down client to finish out the job. Right? It is no different than managing any other asynchronous state. You're still going to have to worry about every single one of those bullet points that's on the front page of React Query.

Cloudflare to Vercel, and then everything just builds and deploys differently. You don't have to import and change anything. It's pretty cool. The the SvelteKit adapter pattern that, JS one of my favorite things about using platforms like that is you don't you don't always know what your application's gonna be when you you start working on it. Yeah. I I wonder, like, this, you know, the Un. Js and the Nitro stuff and then VINCI. VINCI. Yeah. Even though it's VINCI I think it's x, v I n x I.

unless you're doing something server side only.

all of the server side stuff for you. So they have a package called h three, which does, request response nothing that's cacheable.

Okay. So we have to ask. The

WorkerD,

So to to explain how easy it is with Nitro, like, if I wanted to change where I was deploying is just always gonna be out of date. So let's always do stale while we validate. Just always get it from the server. Or, you know, we only wanna do this RFC every 10 minutes or something like that. You you get all those granular really great state management and, like, enterprise app things that you might not think you need right now. But later on, you'll be grateful you have, like, search validations I can tell you something that I've been excited about lately Yeah. Is, this create server function React server components ESLint Next. Js,

environments API that Vite has been working on, quite a bit. I'm not gonna say I enjoy writing documentation, but I try and make it enjoyable for myself You just assume that this user object is there, and then everything breaks.

Yeah. All this stuff is so criminally underlooked in the React ecosystem.

TANSTACK router Yeah. My my personality has it's like it definitely it's like, okay. He's a goober. He's definitely a Mormon. He's definitely from Utah, and he's just, like, overly, like, overtly friendly and and trying to you know? I'm like, k. I don't I'm not they have built this real time, everyone just stopped caring about, like, how do I abstract? How do I do all that stuff? They just want somebody to do it for them, with your with the API route that you wanna expose it in.

and then this little layer around it for server side stuff. So it's powered by Vinci,

in dev mode if it thinks you're going to dev. So it it was just kinda that missing piece of like, oh, yeah. You can bundle with Vite, but it was very unaware of, like, where you were putting things.

on Node, BUN, Deno,

API routes, because than any other async data source.

They have bundling things for, you know, targeting Vite and special plug ins to help you do things like Vue. It's it's really, I also found these, like, super slim wall mounts. They're they're called they're from a company called Sup Klein or Sup Klein, normalization between all of the different There's a lot more of those.

And what is Nitro?

Wes, that's awesome. So I didn't realize that you were were full time on it. I thought maybe you you were because I've I've seen everything new come out, but, that's great to hear that you are full time on this. Let's talk about,

Like, hey. This is pretty intense stuff. Yeah. It was crazy.

ecosystem in the last,

the whole to at least a beta?

kinda thrashy, I Wes. It's just like like, obviously, next move to to server components, and some people are stoked about that. Some people are not stoked about that. And,

like, React in general. Like, Can you give us just a quick rundown of, who you are and and what you do with all your your packages for anyone who hasn't listened to the past episodes?

people are moving over to Remix, and then Remix is moving to React Router. You know? Yeah. And then there's there's the 10 stack stuff, which is you're working on a,

In technical terms, 10 stack start is, like, the idea of a virtualizer I interpret them. So Let's do that. Alright. Okay. Let's just do it. Yeah. Let's do it. I said before that,

lots of charty. We had data visualization for our admin screens, if that gives you any idea.

like, data heavy,

UIs. Right? Yeah. Tons of data heavy everything. Admin and management screens were were basically The reason being that we wanna reserve slots for options for, like, meta options to send through. So it's single argument. It's fully type safe.

I don't know, maybe 6 months, a year has been like, server state

Wow. Yeah. Wow. That's all because you were working at Nozzle, or that was your your company. Right? Mhmm. And that was some pretty heavy

hopefully, in October.

and just look at what everybody is saying, and everybody's like, this is amazing. I can't live without it anymore. So the person who comes in and does a quick start, and then they're just out, like, they they'll learn the rest using TypeScript, things across the board. But that's the idea for middlewares that we're gonna do all of it. And middleware, which is built by Nikhil Sarraf, which is powered by Nitro.

Yeah. For real. When I posted that, a video about ChatGpT moving over to Remix, like, half the comments were, like, why didn't they just use

just without query if you warp it to.

Jeez. And and, like, if somebody wanted to move to this, they've got

move over and opt in

on top of that, I I think I think it's worth mentioning for anybody who doesn't know what 10 sec router is all about. It's a client side router, but it's been rebuilt from the ground up to be completely type safe. And I know that type safety is gonna be coming to, you know, React Router 7 and Next. Js probably soon.

it it has great types, and and it has a lot of Convex. Convex is one of my is one of Tansact's support, and h three and all the utilities we're using, like, they require, and not just great primitives, but good abstractions to let people apply those primitives in JS many places as possible.

So you you you pass Node little bridge function at the top. You take your router, and you take your query client. You marry them together, and you're done.

React Scott lazy import everywhere you know, database, And here and there there is a catch. There's always a catch. Right? And the catch is that, support in a way. I don't necessarily agree with all of the API decisions that they've made around things like, you know, use action state and and server actions in general, bunch of cool tools.

It knows about nesting.

or

do a lot of magical things for you, like code splitting and type Yeah. Type splitting and, like, type

Yeah. I occasionally get nostalgic over the the code based routing, and then I remember these those things that you're referring to. Right? When Wes when you find yourself writing,

version if you return so here here's the thing. I'm just gonna give it away. Yeah. Yeah. You call a server function. So so then it gives you back this function. Right? And if you're on the server and you call it, all of that, it unlocked a lot for me on how to approach server components. All of a sudden, I realized that I already have then you can set stale times. And you can say, hey. You know what?

React Router? And it's people don't realize like, a a whole framework called 10 stack start. Is that true? That is true. So what is it? a like, a create React app, you know, from 6 years ago. You could

But, literally, go go on Twitter and search Sanity router That makes 10 Stack Scott and router very client side first.

fairly easily as as you move through it. Right? filter it out? And he said, yeah. The state management is a major key behind that.

if you're building this yourself,

So Yeah. Yeah. That's true. Cool. Man, I I'm really excited about this. Here here's another fun here's another fun one. And, you know, that's React Query. People like, well, what does React Query have to do a 10 sec router and start? Well, we built this so that it integrates seamlessly.

in their routers, but they really don't. Like, Remix just holds on to whatever you have until you get the new thing, and then it's gone. It just, like, disappears.

it's it's hard. You gotta do a lot yourself, and Right.

type safe system that lets you define your routes either via files or code, and it knows everything about all of your routes. It knows every path, every path parameter, every search param.

You load a new page, you gotta go load it again from the server. So we're caching things with Tansac router just like query is. And then when when you outgrow it, you can just, you know, move over to query. But it'll it'll do all the same stuff at the heart of it, I believe that server components are no different but Yeah. It's it's good enough and and pretty dang fast.

which is why I say, like, file based routing is more than just a way to manage your routes with files. It's actually just a really good way to let a framework It will literally not let you do something stupid, and it has the best developer experience

Yeah. Like like, if if I mean I mean, you can do that right now with with just JSON.

and, like, keep things is gonna be difficult to match.

of of what Sanity router actually is. It's a it's a fully inferred

Mhmm. Yeah. And and it's inflexible. So you call user Vercel, and it's like so much magic is happening. I mean, there's going to be magic, but there is a lot of magic and, like, opinion I wanted it to be isomorphic. And you could, even before we started working on start, you could do SSR with 10 stack router. You just render your app on the server and ship the HTML down, just like what we've been doing for a long time. And 10 stack start Yeah. I just found that out. When everybody's making a big deal about switching over to Remix, I was like,

You can return readable streams too. You can return a lot of cool things in the server functions. But what's cool is if you want to have a React server component, all you do is return

How should we cache it? How are we gonna do, stale while revalidate? And I'm even guys, I'm even getting into stuff like, how can I how can I cache it locally?

it's just so it it's it's like a a wooden club. It's just so blunt.

some of the best tools at my disposal to manage asynchronous state.

Yes. Please keep going. This is this is why we want you on.

because you could do some cool suspense y things. Oh. K? So there's in your mind, there's no difference

Oh. Yeah. That makes so much sense. Yeah. Right. And and, you know, hats off to, like, the the Remix team. Like, when, when Ryan was demoing at React conf, and he's like, you just move it to the loader. And I'm like, this is great. This is a wonderful way to prove out what we were what we believed was gonna be the way to do it. But the difference is that we don't just have 1 loader location where you can do this. You can create as many server functions as you want, and they're just functions. Because post, Like, I wanna do fancy applications that do fun things. So Mhmm. That's kind of the niche I'm trying to carve out for TenStack Router. I love that. Yeah.

UIs when you're on the client.

so listen listen to this. It's asynchronous

Why reinvent all of this? Let's just You have no idea how that thing is getting extracted and called behind the scenes. Yeah. It turns into an RPC. But, I mean, eventually, if you unwrap things hard and like, long enough and deep enough, you'll have some enterprise client that's like, how do I modify headers? What what is it sending a post? Is it sending a get, a put, you know, a patch? Can I do deletes? I have plans for them. So but we should definitely get into how I how we're going to support them and how,

Oh, boys. He's in it. He's he's got the whole thing.

data, which means it's asynchronous state. You're put you're capturing clients client loaders, right, like an SPA mode. No. 10 Stack stuff JS, like, client side out of the gate, you have a next function passed to you. You await it. You get the result, and then you do something with it. So very common to see kind of the next because for doing create from fetch And it it's a high order function that you you call, and it it's very much like use query in a way where you pass it a function that you wanna wrap up in the server.

Wow. That's

that that's a big tangent, but just I feel like when I realized So within but in an agnostic way so that we can translate it into all the different frameworks. It's really interesting. It's not like the most performant state manager, 95% It when when could it be invalidated? doesn't really change that notion. It it just adds in the ability to do server only things. So when we talk about the ability to experiences.

in the you know, at the same time, in parallel, all 4 of them, and then come back.

Very cool.

But then you can also pass it some other things as well. So if you don't pass anything else, you just give it a function. It's gonna do the same thing as use server. It's gonna extract that function out. It's single argument, So it doesn't do you know, we can't pass as many arguments as you want.

Yeah. Oh, your 10 stack query.

a URL that returns

They just happen to be a readable stream instead of a promise

And, I mean, because at the end of the day, if if you get the readable stream itself instead of the element, translate that state management into HD. It's hot. So Yeah.

it's just like an identity thing. It just calls it. But we normalize things like middleware and all this other stuff. And we actually create colon, every TANFAC library has, like, a guide section where it's like, we're gonna take you from 0 to hero, with Convex, Nice. Yeah. And once you do that, all of a sudden, you have this context object translating

It's okay. I I just I I love building applications this way, to be honest.

What what is the difference? The difference is that the data is something that is a little more granular that you have to put together on your own, and the RSC payload is just something that's been put together for you already.

component?

that returns a bunch of data and a

between, like, an API endpoint

That's what I want. Yes. Yes. That's what I want. Yes. Local storage or IndexedDB or something like that. And we Sanity run it. Like, I I have done experimental versions of router and query where we can understand readable streams.

fake request responses Or, like, you know, what a lot of people would love to do JS, I think, ditch all of that bundle that you have to ship to the client for things like markdown and and on the server so that we know that you're getting the same experience between client and server. And then what we do is if you return JSON, you get JSON. You return a request and response, you get a request and response.

what happens when something changes from a mutation? What do you have to do? Everybody knows this. You have to revalidate. You have to revalidate.

you know, a whole bunch of different frameworks.

you'll want to check out Sanity at sentry.i0forward/syntax.

And if you want to see all of the errors in your application,

React for state management.

It's kind of a stealthy package, but we use TanStack store stream hydration, and I think that's where Right. Everybody's a little uneasy about the React ecosystem right Node. It just seems like every corner you go, everywhere you go, it's like, oh, you gotta migrate to get here, or you know you're gonna have to migrate soon. Anyway, that's scary. So I wanted to build something that felt like I could take most most, if not all, of my existing, Yeah. So

Is there ever a future where 10 stack router supports

focus on 1 framework and get everything out the door, get, you know, 10 pnpm start out the door, and then we can go back and say, okay. How how can we make sure that all of this is gonna run-in an agnostic way? But we're we're using all the utilities that we've developed internally at TandStack already to do that. Like, we have we have a TandStack store So my thoughts are if if you look at a lot of virtualization

this is this is coming from many, many years of building applications from CloudFlare But it it has all those attributes where we can we can just push it out to all the other frameworks. So it's all about flexibility.

So You can create a single auth middleware at the top and say assign this middleware to all these functions under this path, or you can compose them and, like, import them and compose them together with, like, a middleware array list.

That's very exciting to me. I built it most mostly in an agnostic way. So we don't use just like all the other libraries, we're not using

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on to reduce ESLint dot I o forward slash syntax. Again, we've been using this tool for a long time, and it totally rules. Alright.

package.

multiple frameworks other than React? 100%.

For a while, I was working on, like, a solid version of it. I decided that I just needed to or put, or whatever. And when you call that server function

So you have, obviously, all these different 10 stack packages. I think, you know, Node stack query supports,

We'll just kinda have to see how that evolves.

in a very like, he is TANsec's store now in a way. Oh, wow. Like, he's been working on ways to do like, he he built derived stores

we have

poll Bos, signally type implementation, those RSCs inside of each other. And what's cool is if you manage them with something that can do granular invalidation, in a way like like Next. Js can only do serial actions and and Remix. You Node, there's something that came out recently about how Remix is doing parallel actions and versus Next. Js's serial actions. Like, I don't wanna ship APIs that are that are just and and, like, over Node mapping and overselling RSCs JS, like, the total future.

that contains, hey. You can have fun reading these docs because the voice of the company and the culture or the person can come through it

the same methods, the same core API, Yeah. Yeah. So much fun. And there's a reason that I've really enjoyed the last 10 years of developing with React because it's been so highly interactive, and it's easy to build very interactive I have. I enjoy writing

we should be, you know, up a creek Chris Harobin just launched a blog post on 10 Stack blog, which we don't have a lot of blog Bos, but it JS, like, the coolest deep dive on TypeScript performance you've you've you'll ever read. It is so cool I think, you know, they're they're just at a certain point, you get into But the one thing that was lacking was, and it was built by the NGS team.

for anyone who hasn't seen the website, there's Tansac v vinix v what was it called? Vinci. Vixie?

I'm also curious if we Vinci.

right now because we don't have them yet. So I'm not I'm not relying on them to ship a framework fake headers Right. Yeah. Yeah. And then you realize there's no built in way to prefetch those unless you have wrappers around it. And then it really takes, like, 5 minutes to be like, oh, I need a framework.

you can do a lot of those things already. You just don't have, like, that transition middleware's fun with, like, types because middleware is usually very magical.

and and how it renders on the page, but it's also headless, which means it doesn't render anything.

Store, Ranger, which is a headless UI library, virtual, which is like a virtual eye virtual scrolling. If you've got a ton of DOM elements, you can't just scroll those smoothly. So you have Wes headless too, which is kind of a mind bending. Yeah. Yes. That's it's like virtual. That's what we asked Corbin when he came on. We're like,

especially when they're interpreted

because we're gonna have things like like Tansac Table is gonna start using derived stores to power Oh. But now it's becoming a little more aware of your, like, deployment targets.

up and down through you know, revealing only what's visible inside of that parent window.

So you can take 1 virtualizer and use it kind of how you would expect with a parent div

the view

an agnostic core for state management and then a bunch of adapters that we've built that But when you're in the middle of, like, a bug or you're at work and something like, you're on call for something and you gotta fix something, and you come into the docs and it's like, oh, man. Remember that one time when your grandma So telling everybody they need to just totally turn their application upside down is a really hard pill to swallow.

you submit to the server, it does a bunch of stuff, and then send some data back. Is Tansac Scott gonna have that?

and you could use that to do a table instead, like an actual table element, which you can't do the same thing with a table because you can't nest a div inside of a table element. Mhmm. So what do you do? You take a table element, and you create for your search parameters using Node and and great APIs for updating search parameters that feel like you're using something like use state or ESLint. Like, just making it stupid simple

And what's the plan for, like, form actions or submitting forms to implementation?

yes, I believe in all these new React APIs if people wanna use them, but I also don't think that serves a lot of traffic, Yeah. As far as as long as I've been doing it, Vite was always the plan because I've been using Vite for for years. Like, I got off Create React app a long, long, long time ago, and I was like, Vite's where it's at. As soon as the Vite React plug in came out, I was like, k. I'm moving over. And since we were doing just client side SPA stuff, it was a really easy lift. It was just like, ditch all this webpack stuff and use all the Vite stuff. There warp some things with, like, CSS modules and things like that that we had to little bit of growing pains. But once it was done, it was done. So I've been using Vee for a long time, and and that's always kind of been the intention, individual cells inside of the data grid. Man, that rules. It uses kind of a But even if you don't do that, even if you just use the router, 10 people forget easily that Tansac router has a built in miniaturized and you start shipping way too much client to the users and they're using, like, a tiny, tiny portion, You know? Who needs who needs children? You can have your little have that little Wes. Yes. Exactly.

really pretty cool. Jeez. Yeah. Yeah. We had Corbin Crutchley on,

these things? Like like, what's the tip for building Scott the React version of something, but how do you build something that's 90% just JavaScript and then

underpowered. Like, I I would never be okay with, like, a

that is then Using the same primitive, one of them is set horizontally, one of them is set vertically. So parsing and ASTs and doing and just do that on the server, ship down the HTML. Mhmm. Yeah. But I do think that there's been

Right? And adding middleware, But but as far as I know, like, tools like Canstack Query and just having, like, Do you have any questions so far? I I it's still data, though. Now this is where I like to to tell people to say, you know what? So if you if you go all the way down, it's kind of Nitro and Vite at the bottom. Okay. But up where we're we're exposing it, so you get an SSR entry point for your app that's very convenient and very automatic. You really don't need to do anything with it at all. And then you get server functions, people will build those semi semi close reproductions You might create middleware for doing common tasks and operations.

on the client, it will do it as a get. So then you get caching, like browser level caching.

data. And with TypeScript, that's sometimes a bit funky because

we can use kind of the same system that we're using for 10 Stack Router that can carry types throughout an entire system.

All you do is pass a path behind this directive that you put in your functions.

you'll get an error. Add the middleware ESLint. You're good to go. That's one of those that's, like, very magical. Like, you just wanna set it in one place, Usually, I'm I'm engaged, So if you start with a function, that's all you need, and it'll get extracted.

in my React Native app or or somewhere externally.

like, a middleware can modify

We're building validation into the API so you can pass a zod schema or a yep schema, and you'll get client side and service side validation libraries, that's one of the major complaints about a lot of them that just serve up components for you JS that you have to have ways to override the component that you're rendering, and then you get into memoization

you don't Weigh ahead of your ESLint. Yeah. Tell me about middleware and modifying types.

to authenticate a request is forgettable So, like, it will run with WorkerD

It's just grabbing something, setting some magical property, and then just ditching out, right, or doing some logging or whatever or transforming.

through that function. Man. And here's the cool part, I think, Nice. So we've been using it for quite a while. And tanstack.com

And on that same idea, you said earlier that a middleware like, stoked about anything yet. I mow I moved my own personal website over to to Next. Js and server components almost entirely,

So the way that we've designed middleware is that, app like studying and really going out of my way to be like, these docs have to be amazing. Most of the time, I'm just like, you know what? I really wanna launch this thing, and I can't launch without docs. So it's just a boulder that I have to get over, and then I can launch it. So I do it, and I launch it, and then it's just a work in progress after that.

to put so the way I say it, type safety doesn't just involve types, but it also involves forgetability.

adopt

is a 50,000 with query. So you can have this client side data fetching and, problems.

That that's kind of the that's the route that we're going.

So

for a lot of people, even myself. Right? You get it caught up in the moment. You're just like, man, whatever.

and that can just keep working as is. But there is middleware that you would wanna write to just not repeat yourself or to, like, enforce things But if you wanna change the method, you just pass method, You know? I'm not I'm not targeting 0 JS,

Ah. And then the step after that is like, oh, you know what? What if I wanna validate this?

And there's some middleware that that doesn't need to, like, transfer type information through to the rest of the system, hooked up well, because not every other framework has those things. And, honestly,

way there's banter.

I think part of that is Next. Js's interpretation of React Vercel Components in the app router, and I think some of that is also React itself you know, the permutations The documentation for all of your your projects are incredible. What are you using for that? Is that all bespoke? Yeah. I mean, I heard this yesterday. I'm gonna be honest. I I was on a I was on a different podcast, like like Nozzle.

that can get out of control really quickly with, like, all the permutations other than, like, you know, some some of the things around deep transition and Some of the work has been partially applied, and then you're just kinda finishing it out on the client.

What is it? What are your thoughts on server components?

And I think the thing that makes 10 stack router stand out

a component very and then you instead of being server side first and, like, opting into the client with, like, use ESLint, like, that's kind of where Nextiva is like, oh, we have it's all server first, then you opt ESLint to the client where you need it. This is more like, no. We Yarn running we are running an SPA. We're running client side routing. We're doing full hydration, Well Yeah. Where's another place that talks about revalidation? I'm taking you for a ride and trying to be, like, consumes variables for,

stuff, like, some of the reasons why they why they built it in the 1st place.

very cool for specific use cases. If you have trying to be a little too fun with your docs. Sometimes it's fun to come in the docs. Oh, it's super quirky and, you know, bundle of 10 step query inside of it. So it can do basically all this all most of the same things that React Query can do, but not everything. Right? It doesn't have, like, infinite queries and pagination, all this other stuff. But it does have a cache.

Yes.

first model.

because I, for 1, don't think that I would move things to be, like, React Vercel component expanded into that role very quickly.

And the whole goal was to be able to give something that's very familiar,

I I feel like a lot of the hate against server components is simply because

to these little boxes. Right?

you know, preload some things here and there. And it's gonna be great because it'll be client side only. But then you can also opt into server side stuff and say, okay. I'm gonna build this very progressively enhanced, you know, HTML driven experience.

and that's gonna be what it is out of the box. And then if you wanna opt in to these server side things, including server components, you opt into them from a client side first approach.

and the rest of your app will still function normally. But once you go in there, just know that there'd be dragons. Right? Yeah.

very tried and true JS far as patterns go, own. And We I just really wanted to get away from a lot of that, and I wanted a way to be able to throw

Mhmm. There's a lot of new greenfield apps being built every day as well, and some of them will graduate to, you know, large production scale applications that live on for a long time. But the bulk of

So I think that sets it apart That solves so many problems for me. Yeah. You have your path, your method, your validation. You have everything, but but you do it through a server function.

with the best data fetching primitives, like React Query, that I think are out there, and then contain the blast radius of server components I'm still going to do waterfall And I ended up with an LG and fake footer rows.

And and there's gimmicky things where they're like, oh, you know what? You can just do use client at the top, and you're back to page. It you but you're not back to page's router. It's not the same. So there it's really like all roads lead to migrations,

because

you know, client side only apps or even server side stuff too and move it into this new framework and really not have to change much.

I think, like, that will probably

Why why focus on client side if if if everyone's doing server side? You gotta do server side now. Yeah. Didn't you hear Laravel's is it now? Yeah. Yeah. I heard.

you try them out, and then it's just nothing but the red errors of what you can and cannot do. And people are are frustrated because all of a sudden you move to next, and everything is server by default. And then you I I can't put this and this, but you're allowed to put this and this. And Right. It's hard, especially when people have large apps that are many, many thousands of lines of code. The the reality is that most successful apps It's not fun.

in the React ecosystem today

from something like h three. So it's kind of like you have all the great primitive approach of something like like Remix, but then you have some of the abstraction utilities that Next. Js is all about. Right? So it kind of sits in the middle. But then the things that you need type safety for, we just say, you know what? If you wanna do type safe things, this is the way to do it. Make those 1st class citizens JS part of the API.

and staff engineer can make sure he's enforcing It's really mind boggling. Like, all you do is create this query client from Convex and kind of, again, marry it to the normal query client, a holistic invalidation strategy for your caching incredibly refreshing. Like, I I feel like my mind is blown here. I have one more. Everybody's always talking like, oh, you have to reinvalidate reinvalidate make our stuff understand readable streams and be done.

that's it for me. That's the promised land. That's how I I like it. That's how I want it to be. Yeah. It's very I think it's it's very similar in spirit. I have a very large Express app, and it's it's very heavy on the middleware.

endpoints that manage things for it for teams, they look just like the mounts that come with the Frame TV, like Samsung Frame, that you can use it on anything. And they have these big metal hooks that hook onto a a latch, and then they they it folds down in magnets against the wall. So I'm really excited to I just got that in from Amazon today, and I'm I'm kind of itching to go install it. So

you might want to include a workspace in teams middleware that you just don't have to think about. Right? But the workspace can just always provide you with a workspace context.

of automatic wizardry so that, you know,

so it Scott just goes up into the ether, and then you can access it. But I haven't figured out the type safety thing yet. Yeah. So I'm really happy to hear that. Well, VINCI

Yeah. That's how we do it in in SvelteKit

each type of developer, be it super junior early dev, can do his little functional composition,

And every time something new comes out, I look at what their middleware implementation

for getting Sanity Scott to

with hooks in the same sort of way. And that, like,

but you also have to have the abstraction Okay. I wanna get this middleware, so dumb. So it was hallucinating You render it. I don't know. Do you wanna talk about that? Yeah. I mean, it's it's basically it's that partial application concept where we're handling literally everything except for the rendering. So we just give you all the building blocks, and then you get to render it how you want, which We're not like, most of the package imitations officially, I've I've been in all those places too.

looks like so much that I haven't found anything I like. I've started moving a lot of my middleware over to a sync local storage,

Beautiful. I'm excited for that. Me too. So what JS the what is the timeline look

function, It it's a sliding scale. You know? You can be totally in line, and I don't care about the external world, or you can be all the way over to the other side and say, externalize this and make it completely safe.

async local storage. And what's cool is you you don't have to use the magical functions like, like React Query, and then we have this layer of components and hooks that live on top of it.

approach. But to do to do inferred type safety well, you need to be able to have a return type that you can infer.

and then they have this React Query adapter on top of it that just works.

Yeah. Well, I mean, the reason People don't wanna hear us.

explode really quickly.

We're rewriting it to allow you to incrementally

writing, like, code examples because it it could not write with my vocal style at all in the docs, and I just said, this reads funny. You know? It was saying things that it thought I would say JS, like I was like, you know, I'm Tanner Lindsley. And it's like, oh, okay. I'm gonna write these docs how I think you write, and it's, like,

And it's like, Kate, cut the garbage. I don't even know how to use this thing. So I think there's a I think there's a good balance between, Yeah. We will support all the new React 19 things. When they when it launches, we are going to investigate all those and support them really well. I don't really wanna build my framework around that Wes used to serve 10stack Scott and Next. We we used Remix.

and maybe they'll drop ESLint command k to a topic every once in a while.

And at some point, you kinda have to say, we're gonna leave some of that to the users. And if they have good primitives, as of 6 months ago well, almost 6 months ago, I went full time on TanStack.

But, yeah, it always goes overboard. You know? Too many emojis.

and have a little Wes.

I'm not trying to suck up. Like, that's what it sounded like. I'm like, this AI is a brownnoser.

then they should be able to use whatever they want. So I believe it's more about having great primitives, users and developers. Like, they're so cool.

Oh, yeah. Vinci, v,

should you use from what service or from what you know, the permutations

all of these, micros.

AI thinks my personality says dog a lot. Like, what's up dog? I'm like, I don't know if I say that, but yeah. Thank you.

You just want a little less. Yeah. Oh my god. Oh, man.

what

deploying to wherever you want that has live queries in it. Yeah. It's pretty cool.

Man, that's great. Oh, one thing I really love and admire about your work is the docs.

trying to be a little bit too much of a of a jokester.

I look forward to the day that

it's probably a hidden talent that given the right primitives, and you don't want you just have to remember to import it and and remember to put it in there. But then there's the other approach where it's like, okay.

did this, and and then your and then your dad used the website, and then it sucked.

Nice. I appreciate that there's so many code examples, and it's not just, like, paragraphs of text. I think there's a fine line between people writing too much text, not showing enough of the, like, the general API reference, but also code examples. I mean, it's a balance, and and that's what I like about it. Yeah. Well and and I explained it this way the other day JS that I like to write documentation that can be approached by a bunch of different personality TypeScript

Was that true? I I tried.

I'm good for them. You know? So I wanna make sure that there's it can be attacked from, like, several different angles. And I think there's also something to be said about Corbin has been involved in that project problems And then you you split up the distance between the viewport on the top and the bottom and you apply that height to the fake row in the table And, deployment targets.

and you don't do anything different. You just pass your queries to use query, So you invalidate invoices, and any RSCs that have to do with invoices go and revalidate and come back instead of your entire application.

What database I have I have some sick picks. I'll just tell you the things I'm in I'm into lately. So Sick. I recently was shopping for a new television for my immutability for React or signals for Solid or, you know, observe observables for with React, do streaming, that's a great, you know, use case for it. And Wes we're talking about, like, you know, meta Facebook timeline and the upper and lower bounds of the all the content, But you could take that same concept, so the same state, that would blow a lot of people's minds. It's gonna be really impressive, the next version. Like, the smallest kilobyte version of Tansac table JS gonna be, like, 4 kilobytes,

So you just have to have good searchable docs. And then there's the person that's, like, wants they love to read, so they're like, give me the guide. Give me the story. Right? And that's why every

it it works so well with the system, like, we already have as an example where you can use tanstack start have already have already existed for a long time.

SSR'd application into a lot of different directions you can go. Right? As far as which framework you should choose, there's like, you know, maybe 4 or 5 React frameworks. You know, what hosting provider should you use? with the most powerful router that I can design,

Vercel pretty well from the other routers, and Remix kinda sits in the middle a little bit. And I think that paints that that's kinda like the the base for explaining how we're gonna interpret server components.

Yeah. And I and I'll Yes. And I'll figure it out. Right? And I don't understand those people, but And and it's hard because up in my main floor, I have a I have a frame, a Samsung frame.

with router, So And then if inside of those RSCs, you're using something like Outlet, tanstack router and, like, all the different variations of the client bundle that you can ship. If that starts getting out of control pixel tall

my personality and it's so cool. And because if it I mean, it has a small notion if it's vertical or horizontal. So you can actually create 2 virtualizers Use server, the directive. Yeah.

You Node? Those are good primitives. Right? And then you're able to come and build on top of that,

big time.

explode The best way that I can describe it is that these these are going to be, How can I do all these things? So I just knew that use server as a cool primitive, very cool. We don't use it. I don't recommend using it. Yeah. I support it. If you wanna do that, go ahead. Use a club. But I would rather supply people with better tools. So we have something called create server function.

hopefully, from primitives to abstractions, right, which is the same way that UI dot dev does their education in their courses as well.

the AI will be able to assume your personality based on things you said. Like, I've we have I don't know. I have, like, many thousands of hours of myself speaking into this microphone. Yeah. I just would love the day that I can just feed all of that into my own model

Yeah. I get that. Yeah. For sure. Didn't you say I think I you said to me once that you use the AI to write a docs for one of your projects.

partners. They're one of the reasons I can go full time. But Convex, on their And we try to keep as much of a logic in the core as possible.

For the early docs of Tansac router, I tried using and this was a while ago. So it was, like, GPT 33.

So the we have that approach. And then there's just, like, the API reference person where they're like, I don't wanna know. Don't teach me how to use this. I just need the just give me the encyclopedia.

and Convex takes care of the rest of it. So it's real time socket based queries. It's it's pretty mind mind blowing. So that's, I think, is a great example. Like, oh, could could we get into real time, and could we get into databases? Yeah. Of course. We could Mhmm. We could spend as so much time there. But with that really great primitive, Convex was like, yeah. It was not that difficult to build this, and I could not be happier. That thing is amazing. So sick pick. Like, I think that it's probably one of the best bang for your buck And it also gives us a position to get in the middle with, like, middleware and also middleware that might adjust types.

so that I can get through it. And maybe some of that enjoyment rubs off onto the onto the readers. You know? Yeah. But I I wouldn't say that I'm, like, so I'm very I'm pretty confident in TANSTACK Start's ability already. So beyond that, I wanna move to beta,

some of these amazing things. A great example is, a Correct. Server rendered

server headers

you'll be getting readable streams back and passing readable streams around.

So you're saying that TanStack Query

This RFC to put state in the URL.

Oh, okay. So ready can do so so for anyone anyone maybe a bit lost is, like, when you send a response from the server,

you can set

that's when you want to apply the create from fetch. Right? Because as soon as you apply create from fetch, you've got weird element syntax, all the stuff, nothing that is portable, blast radius,

and you're like, hey. Instead of blowing away our entire I hate it. I just absolutely despise it

expires headers on it or or stale wire validate or any of those. We have a bunch of shows on them, and 10 sec query will be able to to track those and and refetch them as needed.

Right.

that come from the server on the podcast a couple of months ago, and we asked him, like, how are you building

So now your mutation keys apply to your RSCs as well. So you can say, oh, you know what? This RSC enterprise applications and applications that are surviving well are coming from existing code bases.

this post ID and this user ID or something like that. Right? Holy smokes. I know. Yeah. I'm just not I'm nodding so hard over here. Yeah. So just continue your path. Any of those variables change, your query is going to reexecute, and it's gonna call the server function and and give you some new data.

and even for mutations.

So it for me, I'm always like, let's let's keep these readable streams JS just plain, readable stream with text as long as we possibly can until we need to turn them into something that's not portable.

the utilities or ship a great experience.

away from your APIs and towards your rendering it's just a stream of payload text. You know? You can do whatever you want with that. So is just TypeScript, before the holidays or just over the holidays.

invalidation controls

Node, and this is just a random thought, but does that mean we could potentially have, most developers are are regular folk, and, we wanna be able to translate it to them.

and the other way around Wes you could refetch a server resource

It's nothing there's nothing new there.

you have to move I mean, here's here's what's cool. I I think that setup using Nitro.

will be able to invalidate based on the Wild. But do you pnpm do you spend your day, like, thinking? Like, do you have a thinking chair you sit down with on a pipe?

react you know, tree of the app, let's just invalidate things that have to do with invoices.

But then when it comes time to render the actual elements, Or you do an invalidation,

if Transact Query deems that it like, whatever rules you have in Transact Query to to refetch that data. Yeah. I mean, you've been able to do you've been able to do headers for a while now.

that is synced to the client.

So we need to give them some love. I'm trying to I'm trying to get them like, give them their their moment in the spotlight because they deserve it big time.

Z4. It's a 77 inch C4, And just say, k. If you wanna opt in, here is your Count on it.

my own personal website and my course platform, I've been solve a lot of the pain that people are having,

for my basement, and I did a lot of research into, like, something that's affordable, but also just really, really good quality.

I'm just so stoked about all the stuff you guys are working on. So Yeah. Wes. Yeah. Thanks so much for coming on. Yeah. Absolutely. I'm yeah. I'm stoked about this. You're,

and Manuel Schiller as if you have this huge scrollable area, but, really, it's just that's relational, primitive that I'm building.

server function API really, really nice. In fact, I wanna get it good enough to where we can deprecate If you don't have any questions, I'd love to tell you how they actually are going to work.

for, like, the size that it is. So that's that's one of my sick picks.

That looks cool. Wow. Oh, yeah. Yeah. That's exactly like the frame. I had a I hung our frame TV in our living room, and I it was Yeah. It looks exactly like the frame stuff. I'm like, did they sub did they design and supply those to Samsung? Because they look exactly the same. So set headers and whatnot. If you wanna use the raw primitives of of request and response, you can. But you also have access to all of those great abstractions I could just go into my config and change 1 string from, like, It's in alpha right now. Right? In alpha right Node, and and tan so tanstack Scott has been running. So we migrated from Remix to Tansac start 8 months ago.

This is definitely not a framework that's been born out of curiosity. It's yeah. We're we're building it how we want it because of the of the things that we've experienced. So

Sick.

But it's not insane for client side apps. And then there's React router, which has been really great over the Yarn. Just kind of a stone in the arch of React. But me, personally, I just wanted something better for a really long time. So that's why I built my router. And it does a lot of similar things, but it also does some really cool things that it doesn't do. But one of the things is that, I built Tansac router to be client side only first.

Awesome. Well, I'm very much looking forward to it. I've been,

Awesome. That's a good one. Sorry. That was the LG

For sure. Yeah. I just want everybody to be productive. You know? Yeah. Everybody deserves to be, that friendly. Right?

and I almost bought an 85 inch frame. And then I I I stepped back, and I was like, dude, this is not this is not what you want. This is not what you need. This is for watching And, in the end, it looks so good, like, as a as an item, and it just makes our you Node, it's art. It's so cool. Yeah. And I I almost got sucked into that again in my basement, in one moment on the server. You're capturing some state.

or architectural feedback,

I mean, I I feel like we've got a lot of experience under our belt with things that we've tried ourselves.

Cool.

People tend to just kind of take projects and things, and then they go on vacation. They just kinda tinker. So Yeah. I I wanna get it out by then.

just regular folk like Scott and I and get us excited about it is a is a huge skill. Skill. Regular folk? Come on. Yeah. Damn.

often, those are the best follows of of people that are

Tanner, I think my my head was nodding this entire episode. So, man,

which is insane Wes you think that AG Grid, who we love them. I'm a partner with AG Grid, but, like, their base size is is just massive. But also some newcomers.

you guys are doing big things. And,

are, like, really pushing things on 10 stack router and start. These guys are TypeScript wizards. They understand into API routes.

TanStack JS sure. It has it's got some name play from my name. Right? But, like, my maintainers are some of the smartest, coolest people in the world. We've already talked about Corbin. TKDodo goes without mentioning. Right? Kevin Vandy is doing things with with TansacTable or a, you know, a 20 and and that that width is changing as you're going as you're moving that window up and down. And then the items that are visible in the viewport, we're just kind of swapping in and out as they enter or exit.

a skill on its own. It's like, you're obviously smart at thinking about how to approach these problems, but also being able to explain them to

but there's,

then I I think my plan is to try and get an RC or maybe even a release out before Thanksgiving. I want people to be able to play with this

thinking, what do I move it to? You know? And I haven't been,

C four. My phones went low battery for a second. Yeah. The c four. I I've been looking at at TVs as well. Not that, I'm going to buy 1, but Right. Just because I'm interested in it. And, like, yeah, that OLED I'm I'm probably gonna go OLED for the next one no matter what, and the C4 caught my eye for sure. So

Cool.

And as long as we don't encounter any big bugs or, like, architectural And, like, Remix and Next. Js,

c four.

an MVP at their job or whatever they're doing. So Alright. Well, thank you so much, Tanner. Appreciate all your time, and, we hope to have you on, again soon.

Man,

and Chris Roben

Sean Casieri, a serially executed server action pattern. No way.

Yeah. Sharing nuggets.

After that, I'm gonna feel very good about just saying, okay. Everybody everybody go use this and try it out.

OLED TVs. Like, yeah, it's it's an OLED TV, so you're up in that range of price.

films. This is for, like, you know, being immersed.

Alright. And, Seamus plugs, what would you like to plug to our audience? I wanna plug my maintainers, to be honest. Like, so they're so so cool.

Ian shows a little bit why, like, 10 stack routers type safety

Awesome. Well, send us send us links to all their websites, their socials, whatever, and we'll put them in the show notes because 10 sec start stuff is gonna be doing server side. Is that

you're great at explaining the benefits as well. I think, like, that's a

But, no, that that's that's me and Scott's whole thing is that, like, we hope to represent the normies. You know? Like, we wanna talk to the the really smart people, but, like,

Scott, you wanna wrap up with the last sections? Yeah. So this is the part of the show where we talk about sick picks and the shameless plugs. Tanner, you've been on before. Did you come with a sick pick for us today?

I don't know, some pain pain in my butts in a couple of places. So Yeah. Well curious to see when this comes out. I'm gonna try it like crazy.

Beautiful.

I tried that, and it was hard. It was it was, like, hard. Painful. Yeah. I think you would end up basically just bailing out into something like React Router or 10 Stack Router if you're gonna do that. So I I feel I feel like that's out, Node, I mean, I'm sitting there right now. It's just my I have my office, but no. I mean, I'm I'm a I'm a space case. Like, I spend a lot of time with my family and kids and my wife.

among now it's like, oh, you know what? I really wish I could use this same function too much overprescription API routes as a thing. Like, you'll just use the server function API to do both server functions and API routes. Just 1 unified API to do it all. And when we can figure that out, I'll launch beta.

And and not just like Wes can do it, like React Router and Remix. They're like, oh, we have

when we talk about, A a good one that I'm gonna throw out maybe a little earlier in this discussion is promise streaming from the server down to the ESLint. Like, that's all just 10 Stack Router. Wes don't need Scott to do that. Start's really just kind of that. How do we do things only on the server and how do we deploy, essentially? 2 days ago, and they're like, we just love your docs. I don't really understand that. I I think it's gotta be, The team can always provide you a team context, and they can handle permissions and all that stuff. You need to be able to compose those things in at the site of the server function. So you kinda have to have both. You have to have the primitive of composition, they kind of have these ideas of a cache

being able to do, like, deferred and then a sub div that contains the total height of the content Yeah.

kind of other routing solutions is that Next. Js is just server first. Like, that's just what it is. They're approaching things server first, and the client side SPA stuff routing is just kind of all controlled by the framework. But it's very it it I think it would be very weird to use Next. Js if all you were doing is doing, like, a client side application.

My wife calls me mister Magoo because I'm always running into things.

t h

I'm kidding her.

Are we are you gonna save us?

the rest of the stack and get 10 stack database

but I zone off quite a bit. I'm like, oh, it'd be cool, you know, if we did that. Oh, yeah. Like that. So,

my wife calls me the absent minded professor a lot. Yeah.

and you take that padding area that you can't see, You can't infer what some next function is called with. So what we do is we split that phase up, and we say we have a before, and we have an after. Before is everything that you would do before you call next, and what you return will be the arguments into next. And then after, you'll have everything that you would do after next, including the result and anything that you returned. That way, we can infer the types for all of the middlewares going down the chain and compose them together and make sure that they are all compatible.

And at what point do we get

then,

that makes it appear It's difficult to hook up the same developer experience with code based routing when those ideas start to win out,

So okay. That's wild. Yeah. Yeah. And then what's cool too is is, a virtualizer commonly, you'll see it split up into,

It's absurdly clever. How do you come up with this stuff? Yeah. Even I I didn't come up with that one. I saw that one from a different table library.

and stack them on top of each other, 1 on different axes, and now you have a grid.

ideas and integrations.

No. Probably not.

or 10 stack CMS? Like, is is that your end goal here JS to like, we've been asking for a Rails or Laravel in in JavaScript land, and nothing's really stuck.

hopefully, they would want more of a solid platform to push some of those, And they just said, you know what? There's PagesRouter, and then there's AppRouter, and it's just like a total migration.

most of these packages were built to solve problems there, whether they were like, we looked in the ecosystem and there's nothing there, or we looked in the ecosystem and used things for a while and then outgrew them and thought we could do it better. So that's basically where all the packages in TanStack came from. And, does not have any notion Yeah. I think so. Because we we have code based routing, which I don't suggest anybody uses, to be honest.

I really wanna know, like, what's going on with the router and Tanstack Scott. I wanna know his thoughts on server components and and where that's at. So the Tanstack stuff has just been ripping through the React ecosystem the last couple years, and it seems like it just getting, like, what, ChatGPT

I don't know, maybe, like, 8 years ago. But, really, it's been an outlet for all my open source work that I've been doing over the last 10 years. So I've I've had a startup called Nozzle over the last 10 years, and you can imagine. And that's a really hard thing to, like, advertise and sell to people. They're like, hey. This has an amazing developer experience.

10stack Router, 10stack Table. We're here to talk to him today about what's going on. Specifically,

Wes,

So then you can just compose stuff.

Yeah. So I I started TANstack

uses TanStack Query. Is that right?

You and Tailwind are the only ones that didn't get the ax on that move. Yeah. Hey. That's good. A better indication than the switch, right, that they, have a good day about yeah.

well, I wonder if they use query. And and it turns out that they've been using it for a while, and they kept ESLint the transition. So I'm like, hey. That's that's pretty cool.

so good it didn't get ripped out. Yeah.

10stack

Welcome to Syntax. Today, we have Tanner Lindsley on. He is the dev behind

Everything.

You probably know 10stack Query,