Tanstack Start vs NextJS - Server Functions Battle

[@marwen_dev]

tanner is a genius 🤯, tanstack-start is awesome, when it hit stable v1 many devs will move to using it instead of next.js.

[@ErniePaschall]

Indeed, I am starting to look at it now. Thanks Jack!

[@Hypawolf]

I am waiting for stable release as well. Been using NextJS for a while and honestly it's getting more of a hassle to do things in it.

[@armanrozika]

@@Hypawolf the feel i am feeling when switch from react-router to tanstack-router, life is soooo much much easier

[@KaranSethia24]

isnt this exactly what people say when a new js framework is launched, I remember people said the same thing about remix svelte qwik etc

[@aibulat1871]

Returning WebStream from Server Functions -- definitely a great feature!

[@TianYuanEX]

Tanstack start is infinitely better then Next.js for websites that lean more into interactivity (webapps) then static content (blogs/landing pages/portfolios) purely due to the philosophy the framework was built on

[@jeresalem]

Absolutely. And for static content we have Astro.

[@rijkvanwel]

I see Tanstack, I press like

[@JagaSantagostino]

Man of culture

[@AbhiShake-pl3cf]

I agree with what tanner said. The directive that nextjs went for is too magical. How do we pass headers? How do we alter how its sent? I didnt think it would be useful due to my bias towards vercel but it is deffo useful

[@PraiseYeezus]

'use client' is bad enough, why would I want to control caching through a string? I can only imagine the headaches that will come from self hosting where Next overwrites cache headers...this is the same issue that makes Laravel annoying

[@AbhiShake-pl3cf]

@@PraiseYeezus more trouble for opennext people

[@dzigizord6567]

@@PraiseYeezus "use tanstackstart" is the best directive

[@bidikong]

Can’t wait to use it. Hopefully beta and v0 will come soon enough. Great video, as usual ❤

[@BrunoDias-v9g]

Does it make any sense to use GraphQL with Tanstack Start? Are there any examples? Great video 👍

[@carlosricardoziegler2650]

Nice content !!!!! What about the state of request ? I mean we can use suspense to show loading, we can handle error and show some user feedback's, in this case we dont need more trpc ? More performant ?

[@abdulmustapha532]

Honestly, these days all I like to build with is Tanstack Router in a mono repo with Hono RPC + OpenAPI Typegen. Serve my client on a CDN for free, run my Hono API on a machine. Life is just easier this side of the fence.

[@jherr]

That's a good SPA setup.

[@FuzzyAnkles]

great content as always! 🔥

[@Adityacode]

Only god knows, how and where the "use cache" stores the cached values? Is it in memory or is it http caching or what ?

[@jherr]

The standard adapter is in memory. But you can override the adapter to put it wherever you want. You just need to implement get/set.

[@Adityacode]

@jherr Thanks a lot, I was searching through the docs but didn't find it.

[@abhi.r8]

I am so confused with all the updates I a newbie in react where should I start please anyone answer me

[@dzigizord6567]

tanstack start is such a fresh start and such a logical and intuitive way to add server layer on top of the already amazing router. next is shovelling their way too hard, the way that most of us do not want to be the default, plus next router is crap compared to tanstack

[@kim-s1y7v]

what is your vscode color theme?

[@softgripper]

Hey Jack, punted you a mail re: audio sync. Hopefully it reaches you. Thanks again for another great video.

[@MattChinander]

A nice change to the TS router/start example would have been to follow the Remix pattern where to fn is called through something like useFetcher and the server fn returns the updated value of the count. Avoids doing another request for the loader

[@tannerlinsley]

This is coming and will be built on the new server function middleware/context primitives we just merged in.

[@mahendrakumar-eu6hw]

I will use whatever my organization using whether tanstack or next😂 If you don't you're fired

[@jherr]

That's just generally good advice. Not so much the getting fired part. But the "use what the rest of the company is using" advice is pretty good unless you have an extremely compelling business based case not to.

[@brian-mcbride]

This is looking nice. I really prefer Astro as my main "base" as I can have islands that are not React. React is ok, but it always bothers me the various anti-patterns and, in a large way, lack of innovation compared to Solid, Svelte, etc. SSR is great for Vercel in revenue. They sell servers after all. But I am way more into hybrid or SSG approaches when available.

[@mohammadmousavi6046]

Hi Jack, which font do you use for VS Code?

[@MahmoudAhmed-mf6lb]

That's Cursor not VS Code

[@jherr]

JetBrains Mono. Specifics are in the description.

[@rariber]

I cant stress enough how much I hate how Nextjs server actions works

[@jeresalem]

Can't way to move on from Next.js!!!

[@dataeaseterlaos4920]

I'm a fan of tanstack 🎉🎉🎉🎉

[@monogram6357]

Both of them are cool, I like both and use both of them :|

[@rand0mtv660]

I think I've read on twitter that single request mutation + invalidation will come to Tanstack Start, so in your example there wouldn't be a separate request to re-fetch the loader data. It would all happen in a single request like it happens in Next.js All in all, Tanstack Start seems very promising.

[@jherr]

That'll be interesting to see.

[@rand0mtv660]

@jherr hopefully I didn't just read something wrong, but it popped up briefly on my Twitter feed.

[@jherr]

@@rand0mtv660 I wouldn't doubt it. I think the intention is to have all of the functionality of NextJS covered and then some. But currently Start doesn't work with 19. Which means that RSCs are currently not supported. So returning an RSC update payload, which is what Next does in this case, would at least right now, not be possible. Which leaves returning new loader content, but that would need to be an interesting hybrid (maybe multipart encoded) payload since you've got the return of the server function itself as well as the loader content coming back. And then there is also the issue of whether or not you are using RSCs when they do become available. Next has the advantage in that case that we don't have a choice, you have to use RSCs, so you can architecturally depend on them. That wouldn't hold true for Start if he supports both RSC and non-RSC cases. Woof, this stuff is getting complex.

[@tannerlinsley]

@@jherr Don't complicate it that much. We have always been able to return json from an api endpoint. The main difference with server functions is that they now have transferrable context on top of the payload/result going/coming across the wire. So it should be trivial without 19 or server components to allow middleware to send/receive additional data (like single-flight mutation payloads/streams) on top of what appears on the surface as a simple server function that mutates or fetches some data.

[@ecoded3033]

Tanstack is the manstack

[@codernerd7076]

What happened to this framework when Tanner cannot keep working on it for any reason?!

[@__-se3tf]

A community forms while he's still active. Tanner hasn't been the top contributor to TanStack Query for a while now.

[@VincentDECAUX]

Tanstack is a copy of Remix. But it's nice, I like this approach really.

[@taunado]

Tanstack Start vs React Router + Vite?

[@tannerlinsley]

I literally built this out of frustration with RR lol😅

[@taunado]

​@@tannerlinsley :D Thanks, I'm excited to fire it up.

[@harunalrd]

​@@tannerlinsleyayoo im waiting your router because frustation with RR 😂

[@aminbeee]

At least Tanstack app makes it easier to debug .. NextJS is too ambiguous

[@codefinity]

9:29 If it's just a GET, just co-locate that in as a fetch function with GET instead of making non-mutational things a server action?

[@aibulat1871]

const count = await getCount() -- that appears much cleaner compared to separate loader(). It pretty much vanilla js, very easy to understand, and does not require to learn a specific API. Same can be told about `export async function serverFunc()` compared to createSserverFN()

[@scepta6694]

But you wouldn’t/ shouldn’t fetch data with server actions? Hence always POST. Just have the call directly in the server component no ?

[@inversebrah]

boost

[@fortunatomarcelo1567]

Remix?

[@taunado]

is now React Router + Vite

[@vovasvidinsky1369]

Who can please explain how it diff from just call rest api from FE? What benefit from all these server actions if I don’t use SSR?

[@JeromeMeichelbeck]

Rule of thumb: if you don't see any benefit, you probably don't need it.

[@nikoryu-lungma]

Oh, this thing again? I honestly could not give less f*** than I already did with these things. For me, anything that works, I'll take it. Just let me know what the tradeoffs are, so that I can measure them.

[@gyros9162]

And here we are coding counter with making requests to the server

[@jherr]

It's just an example.

[@tamaniphiri]

Don't be hard on yourself 😂

[@Shoharnaaze]

Again a new lib/framework?? Pfff 🤢

[@2gbeh]

Eww