Tanner should change his name to Midas Linsley because everything he touches is gold

@dkaigorodov

3 ай бұрын

Well, he is to touch NextJs. It is the last hope.

@jitx2797

3 ай бұрын

Another framework?​@@dkaigorodov

The tanstack-router-vite-plugin is also great that you dont have to manually configure tsr config.

Impressive, very nice. Let's see Paul Allen's routing package.

Tanstack Router is very cool, I will be using it in my next work application, thanks so much for your excellent example and explanation !!

React query is the best lib i found when learned React in past.

Awesome video, as always!

could you please make a quick video to elaborate more on the usage of server in vite, to explain the "server" file a bit more, perhaps share you view on possible use cases as well. and props to you sir, one the best content on youtube 🙏, thanks a lot for sharing your knowledge.

tanstack makes react easy af, router, query, tables, web is actually fun now

Jack being savage with Napoleon. 😄

Would be great to see how this ties in with tanstack query! I take it loading data at the route level is slightly faster than fetching when the component JS is ready

Great video! I understand the intent is to share TSR with the community, but I think it would have been much nicer if you gave the search parameters a bit more time. For example when you enter the search parameter manually in the URL, it's the default state of query (which is what the code you provided does!), how to encode the URL properly to avoid weird quirks etc...

Jack, how easy it will be to have protected and public routes in comparison with react-router?

finally not nextjs topic :D

@dwolrdcojp

3 ай бұрын

Can you do a video of using TSR in nextjs?

Thanks Jack!

Hi Jack, when will your NextJs course be ready? I've been waiting for longggg time, haha. Have a nice day!

@jherr

3 ай бұрын

Working on it every day. I do apologize for the delay.

When you used the 3 second delay in your API I don’t think that’s streaming that’s just a delayed promise. With actual html streaming the initial server rendered page gets updated over time using the same connection.

Thank you uncle Jack!

Cool framework

The only complaining I have so far with React-Router is that the docs is really lacking. I just took a look at the Tanstack Router docs and it seemed way more detailed.

Which vs code extension are you using to dim the lines of code and highlight the lines of code for explanation

@jherr

3 ай бұрын

That's a post processing effect that I apply in ScreenFlow.

@Technology_Forum

3 ай бұрын

@@jherr thanks, other than that what are the various top plugins your are using in the backed please specify

i dunno, i dont think ill ever embrace file based routing. its just not my cup of tea. every time i've tried it, it kinda falls apart in my hands.

@neociber24

3 ай бұрын

What make it hard for you? I find it really intuitive. The only time that was useless for me was a project where I needed a route be in-memory and URL depending a condition

@KevinVandyTech

3 ай бұрын

@@neociber24 Good thing that TanStack Router is not file-based routing by default. file based routing optional and opt-in in TSR. And even then, it just creates a config file.

@neociber24

3 ай бұрын

@@KevinVandyTech that's true, but to keep the typesafety you need to write more things than react-router

@RedVelocityTV

3 ай бұрын

Seems like a you problem g

Wow😍

React should mention tanstack in their homepage, best libs in React's eco-system

Issue with this video is yes you showed that it gave errors, but you did not show the type inferance on anything while typing. data.???

was it server or client side fetces?

@jherr

3 ай бұрын

Server for SSR and then subsequent requests are from the client.

Nice video, but latest version is 1.18.3 and a lot is depricated in your version, like new FileRoute is now createFileRoute()

@jherr

3 ай бұрын

Cool. I'll update the code.

Anyone know this vs code theme name, please tell👀??

@salemfenn666

3 ай бұрын

It's in the description! Theme is Night Wolf [black] and font is Operator Mono

I genuinely don't know the difference between TSR, React Router and Remix anymore, they all look the same. Why this many alternatives to solve a common problem other frameworks already solved?

@neociber24

3 ай бұрын

Remix uses React Router. TSR is a more typesafe alternative.

@essamal-mansouri2689

3 ай бұрын

Remix is a whole-ass framework that includes how to build the project, server side rendering and a lot more, including a Router (React Router maybe? I'm not sure what they use by default but it has similarities to TanStack Router). The main thing here of TanStack Router is type-safe while Remix's router is not.

@everythingisfine9988

2 ай бұрын

TSR can do a data fetch on button hover. Making this the absolute fastest paradigm possible in routing. SSR would be slower

@versaleyoutubevanced8647

2 ай бұрын

@@everythingisfine9988 this come with a list of tradeoffs

Not sure how I feel about the whole "loaderDeps" and "loader" design (8:28). Feels _really_ opinionated (to a fault?) about when and how fetching of data occurs in the "page" load lifecycle. Works in simple cases but has me curious about how it would actually perform when multiple requests are needed, dependencies are involved, etc.

I think the pace of this tutorial was a lil too fast, for someone completely new to TSR, a lot of things were skipped over or barely touched

And how is this not a copy paste from all Remix ideas? “Copy my homework but make sure to change it a little bit so it doesn’t look the same”

@SeanCassiere

3 ай бұрын

It certainly takes a lot of concepts from Remix, because they honestly are great! Where Tanstack Router really differs, is in its zero-compromise approach to type safety and first-class support URL search parameters. It also takes a special interest in allowing you to safely serialize and deserialize JSON from a search param as well. It does have some other points in which it differs as well, but IMO those are the big ones. Honestly, if you don't need a type-safe router and are doing very simple operations with the URL search parameters, then Remix's router will suit you just fine. Tanstack Router really comes into play when your URLs start holding more complex state patterns and you need strict type-safety in what's accessible via your router.

You seems to be using outdated version, new FileRoute is now deprecated...

ok, cool, but I don't see how this is better than React Router. Since we're exlusively using JS and not TS, the main difference is File-based Route Generation instead of creating an object representation of routes and perhaps built-in SWR in loaders. Is there anything else? I think I will stay with React Router. A more significant difference is needed to migrate.

Hehe you have some work to do to compete with me 😋 I have all the type definitions for every route if you want them.

What about wouter ?

@SeanCassiere

3 ай бұрын

Wouter is great! It's super lightweight and is the best solution for its target audience. TSR's focus is more on its first-class support for URL search parameters and storing complex state in it, as well it's type-safety story.

Wait what?? File based routing Without having to use a framework??

Great! Thank you for sharing

Where's your opinion? I thought you were going to give some opinions, not just a demo. compares to Next? Compares to React Router?

@jherr

3 ай бұрын

My opinion is that if I was building a SPA today this is the router I would use.

@PeterKellner99

3 ай бұрын

@@jherr Not to drag this out, but does that mean you'd build an app with the TanStack and not all the routing built in to next.js? I'm pretty heavily invested in Next. I don't love their routing, but I can't imagine I'd be able to use any other router with a next app because it so much a part of their way of building apps. (BTW, I think I met you once many years ago when you were working for Joe, and Joe and I were doing a project together sponsored with Microsoft.... Silverlight days, or as it was called back then, WPF/E)

@jherr

3 ай бұрын

@@PeterKellner99 Hi Peter, good to hear from you again. My point here was that if I was looking to do a SPA, probably with Vite, then I would use this router. But for SSR applications definitely Next and with no additional router. (Usually no additional router is assumed with NextJS, but some comments have indicated that folks are using a router on top of NextJS for some reason, which I think is a terrible idea.)

@nigeldasilvalima4568

3 ай бұрын

@@jherr Between Next and Remix do you prefer Next today?

@jherr

3 ай бұрын

@@nigeldasilvalima4568 100%. Putting aside the politics of Vercel vs Shopify, IMHO, App Router is a way more powerful platform than Remix. And I really don't buy the "agnostic web standards platform" line. Remix being agnostic to framework has zero developer/customer benefit. And the web standards take is realistically scoped to a very small subset of the platform. It's more a talking point than practical reality.

Let's fix NextJs Memory leak. We don't need another copied router

Although you tried, introducing new libraries should be done in a "crash course" way, not presentational. I felt lost after couple of minutes pausing and wondering what is what and why like this. Even though you explained parts of it, I was still left with a hole in the jigsaw.

is redux dead? :D

@wishmeheaven

Ай бұрын

Redux Router? 🙄

@nickwoodward819

Ай бұрын

@@wishmeheaven tf are you rolling your eyes for?

@wishmeheaven

Ай бұрын

Those eyes were rolled to align with your question which rolled off the topic from routing to state management. I would consider your question within a proper context - A. If the topic was Tanstack Query. B. If Tanstack Query was a client-state management tool. C. If I felt that the world needs another routing library. With that being said, "Redux-Router" does sounds cool 😉 Although.. I did get the impression that those guys (Redux, Tanstack..) are trying not to step one on each other's toes.

Why do people invest again and again time providing solutions for problems which dont really exists anymore. I am tired of all the JS stuff frameworks and libs which in the end all do similar things😅

@JohnMcclaned

3 ай бұрын

KZread views

@SeanCassiere

3 ай бұрын

With TSR, it was born out of Tanner needing to store some complex state in URL search parameters and needing strong type-safety out of it. He ended up having to heavily modify react-router in his startup's codebase before he couldn't get more type-safety out of it. Even now, outside of TSR, all the frameworks and libraries in the routing space treat URL search parameters as simple key-value pairs and don't really offer you a solution for dealing with complex states being stored in them. IMO: I don't think Tanner intends for this library to become the most used React routing library or anything like that. But, Tanner needed a solution for his problem and figured others may also want something like it.

@DanielEg95

3 ай бұрын

@@SeanCassiere thanks for the Info.