Quick clarification: the typegen'd files are designed to be "stateless" as in you can make changes to the route files and the types will always be correct even if you haven't saved to filesystem yet. The only "static" thing that typegen depends on is `routes.ts`, so if you update that, you'll have to save it to get updates. But that happens much less frequently and more atomically than making changes to actual route modules. It's actually a part of the type-safety design that I'm really proud, so happy to chat about it more whenever! Oh and I think you're gonna like the design I have for "route directories" if you want better separation between "server-only" files and other stuff.
is there a way to separately generate those types without running dev server or build? for example my GH workflow starts with parallel execution of biome, tsc and vitest and only after it proceeds to build. i assume that `tsc` should fail unless types are generated prior to that, am I right? Do we have something that could be run with prepare script? UPD: i found react-router typegen command, nice
@imexoodeex I like next, but I appreciate Remix more. If people wanna complain about files that they don't wanna touch, then I don't know how else to make them feel better.
@@incarnateTheGreat Yeah, we should probably put them in by default and just add a message saying you can delete them if you want. @imexoodeex Can't win them all. Better that developers know what they can use and how something works then trying to win a "who has the least amount of special files" game
0:00 React Router V7: A Game Changer? 1:12 Epic React Tutorial: A New Approach 2:40 React Router V7 Upgrade Path and Features 3:55 Building New React Apps with React Router V7 7:00 React Router V7 for Server-Side Rendering 13:38 Setting up a React Router V7 SSR Project 14:40 Implementing Server-Side Rendering with Suspense 18:00 Loader Functions and Data Fetching for SSR 20:29 Comparison to Other Frameworks (Next.js, Remix) By snorvia AI chapter generator
v6 to v7 (no framework) is actually fairly easy... v7 WITH framework is a different story... but you don't need to go there unless you care about those extra features
@@t3dotgg Well it's one app of many at the company I work for, and we have other dependencies/business needs that were more important so this fell down the list.
@@t3dotgg Well we all know that's the problem with JavaScript. But when a routing library makes a major change it has an impact on the people that use it. Especially one as popular as React Router.
This was super helpful to watch you go through this, lots room for improvement to make the starter templates lead you through how the different pieces interact Thanks for all the feedback over the years and for the support on us focusing on supporting projects already built on react router
The problem with React Router is their docs. I remember looking for a function docs and I have to go to Remix docs event though I only use RR not Remix
Docs for react router 7 are still bad. Data routers aren't documented at all. the template for react router 7 in framework mode installs tailwind for some reason? There is a lot of weird stuff going on
It's a really simple Layout in root is the entry point, although you can skip this and now your default export from root.tsx becomes the entry point. And for other named exports they clearly mentioned in their docs.
man, I love where React is, but I hate so much the direction it's going. - Mixed front and backend code: bad - Rendering TWICE, once in back once in front, all scalability benefits of JS gone: bad - Magic exports, hidden files: bad - JS backend: bad
Remix (and now RR7)'s single “flow” makes everything straightforward: for each route, you define what data you need (loader), how it looks (export default), and handle mutations (action + Form). You can skip client-side JS if you want, add caching with headers, and everything’s built into one approach. In contrast, things like Next often split data fetching (SSG, SSR, API routes) in ways that add extra complexity-especially when you need private data or dynamic updates. Remix keeps it simple, flexible, and powerful all at once. I'm excited for RR7.
You should dig into the clientLoader combined with the other loader(s). You can do so much more once you use them both together. Caching options are endless.
I'm using v6 on my project. When its eventually released I'll be spending the next year updating my code base. However, I added my entire frontend codebase to a claude project and asked it if there are any major changes required and its told me it'll only take me 2-3 hours and what Im going to need to change. :D
11:41 I guess I'm not sure what the difference between a magic export (e.g. "ErrorBoundary" or "links") vs a magic file name (e.g. "page.tsx" or "error.tsx")
I see why most people love SSR and so do I myself - but when I want to use it there's Next (I know that app router might do some magic like here, but I think it's easier to understand app router than rr-v7 framework). SSR isn't always the best - if you don't care about performance, SEO and so on - React with CSR is enough, and I guess handling client side routing is the most common thing people want to use when using React Router.
Hi Theo, can you make a video about the future of web development, and how do you think it will look like in the near future? (yes, I know this is a spammed topic, but I am interested in your opinion as the future of a no-code fully completed product is getting closer)
I’m pretty sure those autogenerated types are going to go away. Part of the reason Svelte is moving so much towards more standardized JavaScript is to avoid needing to generate types, in part because the DX is so bad. In fact, I’ve seen reports that the next version of SvelteKit, which will require Svelte 5, won’t do any “magical” types anymore.
Sticking to tanstack/router for now. I'm not yet convinced by react-router and remix approach to ssr. This whole "magic" stuff happening leaves me doubtful.
seeing a public well-known and experienced person struggling with the same things about meta-frameworks, that i personally cannot stand (file-based routing, code-/typegen magic), is such a f*cking relief... can somebody explain to me why those things are necessary and how opposite solution (with config-based routing and no code-/typegen) would be worse or even impossible to achieve framework features we have currently?
With RR7 you have the option to use config based routing if you want. You also have the option to not use TypeScript. So both your peeves are not in fact peeves with RR7
@@mikequinn yeah but using a framework ts is installed out of the box. And so is Tailwind (yet somehow vite and rr-v7 forget about scss). Personally I don't care since I use ts and twcss but I see why people might want to use router without these two techs
Thanks I hate it, RR7 holds a ton of boilerplate code, while Remix was simple, JS Framework devs seem to forget that software don't revolve around their breaking update cycle.
Web dev is just silly at this point. For most sites the entire job of the developers is just refactoring because at least one of their major dependencies will rewrite itself every quarter. It's worth it to reinvent the wheel and write in-house solutions; that way you dont have to write new code unless you actually want to change something.
Yeah... I tried using React Router with Motion for some very specific transitions. Turned out after 3 days of testing that they just would not work together, so I literally had to build my own. Took me an hour to write q simple router that worked, 3 days to try to get an off the shelf working with my other junk... Funny how sometimes doing things yourself can actually be faster...
This video shows that JS devs are quick to judge any framework they haven't already learned. If he spent as much time learning RR before doing this video as it takes to figure out the undocumented caching bs of Next, then his experience would almost certainly go more smoothly.
@@Eva-km5ng This is the problem with these news videos. While it's good to keep up with the latest stuff, you're going to get a tutorial by someone who's basically never used the new version, hasn't read the docs, etc
Well that is just a ridiculous take. If you jump in to any framework and make assumptions on how it works without first reading the documentation then yes you will have a bad time.
Quick clarification: the typegen'd files are designed to be "stateless" as in you can make changes to the route files and the types will always be correct even if you haven't saved to filesystem yet. The only "static" thing that typegen depends on is `routes.ts`, so if you update that, you'll have to save it to get updates. But that happens much less frequently and more atomically than making changes to actual route modules.
It's actually a part of the type-safety design that I'm really proud, so happy to chat about it more whenever!
Oh and I think you're gonna like the design I have for "route directories" if you want better separation between "server-only" files and other stuff.
Is it possible to actually have file based routing thru react-router?
@@GreatTaiwan Yes, you can import the remix-flat-files package and it still uses file based routing
is there a way to separately generate those types without running dev server or build?
for example my GH workflow starts with parallel execution of biome, tsc and vitest and only after it proceeds to build. i assume that `tsc` should fail unless types are generated prior to that, am I right?
Do we have something that could be run with prepare script?
UPD: i found react-router typegen command, nice
@@vorant94 The typegen is a tsc plugin, so it would run before tsc actually checks your types without any changes. I recommend you test it out.
entry server and entry client are the entry files, they are hidden by default now, but you can restore them :)
They should be available by default.
@@incarnateTheGreat if they would, next users would yell that next is easier, because it doesn't have it
@imexoodeex I like next, but I appreciate Remix more. If people wanna complain about files that they don't wanna touch, then I don't know how else to make them feel better.
@@incarnateTheGreat Yeah, we should probably put them in by default and just add a message saying you can delete them if you want.
@imexoodeex Can't win them all. Better that developers know what they can use and how something works then trying to win a "who has the least amount of special files" game
0:00 React Router V7: A Game Changer?
1:12 Epic React Tutorial: A New Approach
2:40 React Router V7 Upgrade Path and Features
3:55 Building New React Apps with React Router V7
7:00 React Router V7 for Server-Side Rendering
13:38 Setting up a React Router V7 SSR Project
14:40 Implementing Server-Side Rendering with Suspense
18:00 Loader Functions and Data Fetching for SSR
20:29 Comparison to Other Frameworks (Next.js, Remix)
By snorvia AI chapter generator
This should be pinned
Should compare with tanstack-start
11:20 export default doesnt break since it allows any name to be exported.
I like videos where people give Remix more attention and respect. I have absolutely NO desire to go back to Next.
We haven't even finished migrating our app from v5 to v6 yet. The rate of change with this library is crazy for one that has such a wide impact.
v6 to v7 (no framework) is actually fairly easy... v7 WITH framework is a different story... but you don't need to go there unless you care about those extra features
Bro it's been over 3 years that's on you
@@t3dotgg Well it's one app of many at the company I work for, and we have other dependencies/business needs that were more important so this fell down the list.
@@BigBill04 the crazy rate of change might not be on React Router then :)
@@t3dotgg Well we all know that's the problem with JavaScript. But when a routing library makes a major change it has an impact on the people that use it. Especially one as popular as React Router.
This was super helpful to watch you go through this, lots room for improvement to make the starter templates lead you through how the different pieces interact
Thanks for all the feedback over the years and for the support on us focusing on supporting projects already built on react router
Great video! Looking forward to watch the Remix history video
We literally use react router mostly for client side routing which is great already.
It did actually say ABORT_DELAY was deprecated in that Issue you went to, you just didn't fully read it
The problem with React Router is their docs. I remember looking for a function docs and I have to go to Remix docs event though I only use RR not Remix
I‘m glad to have migrated to Tanstack Router
Docs for react router 7 are still bad.
Data routers aren't documented at all.
the template for react router 7 in framework mode installs tailwind for some reason?
There is a lot of weird stuff going on
Yeah, using it as a library is much easier and you have used rr-v5, then it's even more easy
It's a really simple Layout in root is the entry point, although you can skip this and now your default export from root.tsx becomes the entry point. And for other named exports they clearly mentioned in their docs.
man, I love where React is, but I hate so much the direction it's going.
- Mixed front and backend code: bad
- Rendering TWICE, once in back once in front, all scalability benefits of JS gone: bad
- Magic exports, hidden files: bad
- JS backend: bad
Fortunetly we have much beter router for react now, tanstack router
Ts router is so good
I don't know much about TS router but I I thought it was built off the back of react router
Nope, react router v7 much better
Remix (and now RR7)'s single “flow” makes everything straightforward: for each route, you define what data you need (loader), how it looks (export default), and handle mutations (action + Form). You can skip client-side JS if you want, add caching with headers, and everything’s built into one approach. In contrast, things like Next often split data fetching (SSG, SSR, API routes) in ways that add extra complexity-especially when you need private data or dynamic updates. Remix keeps it simple, flexible, and powerful all at once. I'm excited for RR7.
I will say, though... their documentation still sucks. haha
You should dig into the clientLoader combined with the other loader(s). You can do so much more once you use them both together. Caching options are endless.
would like a full video that includes the story of why ryan left to start reach router and then came back to work on react-router
It's possible to opt out of the loader and components being in the same file in RR7
Bruh I love how honest you are 😂
React is like Poker. People play it not because they like it but because it can pay your bills.
I like it
I like it and I know many people who likes it.
Interested in that Remix video!
In that ad read I thought you had one of those fake glasses, noses and moustache ensembles on !
I'm using v6 on my project. When its eventually released I'll be spending the next year updating my code base.
However, I added my entire frontend codebase to a claude project and asked it if there are any major changes required and its told me it'll only take me 2-3 hours and what Im going to need to change. :D
next year react v8 will be out and claude will tell you to bend over
Uhhh, you're actually seeing the export default... 11:30
he's a junior dev who became a tech influencer for junior devs
Updating to Remix v2 and Remix Vite wasn't completely smooth :) excited but terrified to try v7 😅
I would've been able to switch from Remix to RR7 pretty smoothly but I'm using Sentry and that's the only dep that failed
@Eva-km5ng how did it fail?
the main problem for me was the flat-routes having only single level directory
@@ukeshrestha good thing that you can plug your own routing if you want to
@@Eva-km5ng yea cause RR7 not support VITE 6 yet. I use VITE 5.4.11
3 seconds is crazy
11:41 I guess I'm not sure what the difference between a magic export (e.g. "ErrorBoundary" or "links") vs a magic file name (e.g. "page.tsx" or "error.tsx")
I see why most people love SSR and so do I myself - but when I want to use it there's Next (I know that app router might do some magic like here, but I think it's easier to understand app router than rr-v7 framework). SSR isn't always the best - if you don't care about performance, SEO and so on - React with CSR is enough, and I guess handling client side routing is the most common thing people want to use when using React Router.
They still haven't figured out routing? Jeez
8:22 - I don't know about that man. Remix has been better than most for quite a long time: ua-cam.com/video/r4B69HAOXnA/v-deo.htmlsi=pmVDsohbjzERywb1
Magical entry point is such a pain. I hate it so much
Hi Theo, can you make a video about the future of web development, and how do you think it will look like in the near future?
(yes, I know this is a spammed topic, but I am interested in your opinion as the future of a no-code fully completed product is getting closer)
I’m pretty sure those autogenerated types are going to go away. Part of the reason Svelte is moving so much towards more standardized JavaScript is to avoid needing to generate types, in part because the DX is so bad. In fact, I’ve seen reports that the next version of SvelteKit, which will require Svelte 5, won’t do any “magical” types anymore.
Sticking to tanstack/router for now. I'm not yet convinced by react-router and remix approach to ssr. This whole "magic" stuff happening leaves me doubtful.
seeing a public well-known and experienced person struggling with the same things about meta-frameworks, that i personally cannot stand (file-based routing, code-/typegen magic), is such a f*cking relief... can somebody explain to me why those things are necessary and how opposite solution (with config-based routing and no code-/typegen) would be worse or even impossible to achieve framework features we have currently?
With RR7 you have the option to use config based routing if you want. You also have the option to not use TypeScript. So both your peeves are not in fact peeves with RR7
@@mikequinn yeah but using a framework ts is installed out of the box. And so is Tailwind (yet somehow vite and rr-v7 forget about scss). Personally I don't care since I use ts and twcss but I see why people might want to use router without these two techs
20:32 nobody has been fighting any "war", for fuck sake...
I kind of wish there was an easier migration path from old CRA/webpack based apps to using vite. We're effectively stuck with CRA at work
remove the react-scripts and install vite directly.
Those migration depends on your injected craco or similar funtions :D
Thanks I hate it, RR7 holds a ton of boilerplate code, while Remix was simple, JS Framework devs seem to forget that software don't revolve around their breaking update cycle.
Web dev is just silly at this point. For most sites the entire job of the developers is just refactoring because at least one of their major dependencies will rewrite itself every quarter. It's worth it to reinvent the wheel and write in-house solutions; that way you dont have to write new code unless you actually want to change something.
So you're still writing jquery? Or raw dogging pure js?
"web dev is just silly" -- always has been
We use Jjquery
Wait. It's been out since November 22?
yeah he is late
Tanstack Router is better
💯
I'd love to have Tanstack based on top of Rs* ecosystem rather than Vite ecosystem though.
@@BleedingDev I would also pay thousands to access Tanstack. It has definitely revolutionized front-end development
Why can't you access it?
Also, how do you know it revolutionized something if you couldn't access it?
@@MrHamsterbacke756 Do you not understand hypotheticals?
Did a double take seeing the author of the blog post
im going to trust in tanstack router in my project
Hey, curious what "sandox cd" does around 8:25. Anyone knows where I can find more information?
"sandbox" is the name of the directory he was in, "cd" is the command to change to a different directory
@@spoofy5073 :facepalm damn you're right 😅. Still too early here. Was hoping for sth. devbox like cli for quick isolation.
A little bit cursed… as my migration)
remix is not getting killed at all, this is misleading
Remix on its own , I think he means to say.
Remix-run tech is embedded in React Router and it works very well.
Please, it would be awesome to hear about remix history
Yeah... I tried using React Router with Motion for some very specific transitions. Turned out after 3 days of testing that they just would not work together, so I literally had to build my own. Took me an hour to write q simple router that worked, 3 days to try to get an off the shelf working with my other junk...
Funny how sometimes doing things yourself can actually be faster...
None of this is interesting to me, I am only interested in typesafety and ergonomic api and now use tanstack router.
quack
Damn, 7 hours and still no comments from brainrot tiktoker user about video being +10min longer lol
Co-Founder is Michael Jackson? lol
Easy answer: no.
bro saved 30 minutes of my life
The react ecosystem is a giant mess. Why do we need meta frameworks over frameworks
@@underflowexceptionthey solve things
@@underflowexception there wil always be a need for batteries included solution. always.
@@underflowexception here we go, the react abolitionist andy
if they add server components then it would great
11:05 my guy, it's a default export. It isn't rocket science as for why the name doesn't matter.
This video shows why you should never use react-router framework mode or anything with remix name. Well done, Theo 👏
This video shows that JS devs are quick to judge any framework they haven't already learned. If he spent as much time learning RR before doing this video as it takes to figure out the undocumented caching bs of Next, then his experience would almost certainly go more smoothly.
@@Eva-km5ng This is the problem with these news videos. While it's good to keep up with the latest stuff, you're going to get a tutorial by someone who's basically never used the new version, hasn't read the docs, etc
Well that is just a ridiculous take. If you jump in to any framework and make assumptions on how it works without first reading the documentation then yes you will have a bad time.
Yeah I just use Next.js
First 👀
Nice. You will get your award after GTA6 gets released 🎉
Just stop using React
What should we use instend?
Solid