FUTURE of react-router v7 and Remix.run v3 EXPLAINED.

you're probably here because you heard that remix is getting merged into react router well let's talk about it if you didn't already I highly recommend you read this article it explains a lot of stuff in detail but I'll go over everything we know up to this point so you guys understand what's going on and why this makes perfect sense so if we scroll down a little bit and if we read what remix team wrote here they've been building remix for over 4 years now and they go over in the detail why while they were building remix and merging stuff back into react router the difference between remix and react router became smaller and smaller after they added single page application mode in version two that difference became even smaller throwing out the compiler and switching to a v plugin didn't help either because it almost boiled down to the same app just re-exported from remix and naturally because the projects are so similar in nature and remix mostly reexport stuff from react rouer anyways the natural course of events here was to merge remix into react rouder but in order for you to understand why this happens let's first go over a little brief history on remix and why this makes so much sense so at the beginning we had react router and when I say react router I mean react router version six and because we had react router the remix team decided to build something on top of that that makes building websites easier so what they did is they built their own so what they did is they built their own compiler and on top of that compiler Came remix and remix brought a lot of goodies to this tack stuff like automatic code splitting simplifi data loading form actions server actions simplified pending States optimistic UI server rendering static pre-rendering and a lot of other things as the project progressed what happened is they first eliminated the compiler that they were using the custom build compiler and they moved to V while they were doing that each feature that was added to remix was ported back to react router and re exported from react router and imported into remix and used there so naturally what happened over time is the react router grew and grew more similar to remix and after a while what happened happened is that the difference between react router and remix itself became so little that it didn't even make sense to actually have remix as it is right now because they were basically exporting 99% of functionality from react router and then reusing it in remix so why that makes sense to move remix to react router is you move this little little difference into react router it grows a little bit more in feature set and then all of this becomes react router features instead of remix and then after that what can happen in the future is remix will grow in a different direction it will still use react router as its basis but it will head in a completely different direction depending on what the remix team reveals for now we have the code name Reverb whatever that means but we have zero details on what's that going to look like so the good thing is that that the moment what's going to happen is the V7 of react router is going to be identical to what remix is right now and obviously why that's a good thing is you get all of this for free and how do you get this for free so if we remove this circle here and this gets merged into react router what happens is you have your react router app you use the V plugin from react router V7 that will basically be identical to what the remix plugin is right now and you get everything from remix in react router and you instantly unlocked all the possibilities remix brings to the table in your react router apps and why this is big is because over 7 million GitHub repositories use your react router which means over 7 million repositories have a clear way of moving over to react V7 and getting everything that remix has improved in the ecosystem out of the box coming back to to the article now that we understand why the decision was made let's go over the next sections and dive a little further react router is used by 7.8 million public repositories on GitHub and God only knows how many hidden ones and naturally while looking at it it makes so much more sense for them to go into the direction of merging remix into react router than the other way around if you already didn't know remix and react router are owned by Shopify one of the biggest companies in the world and they use react router for a 5 million lines of code application so imagine the headache of moving that application over to remix and then scrolling down again you already have a list of why remix is so great and they go over how create react app was the best way to create react applications but they were minimal in terms of what they offered out of the box and most applications that were created with create react app use react router for the routing solution and unfortunately create react app is dead and react scripts I haven't seen in the wild for a very long time now and even the react dogs don't even recommend using them but at the same time wheat has grown in popularity by a huge margin which is further showcased by the graph here that we see on the screen which shows us how wheat has progressed to become one of the most popular ways to build react applications and last all what they did was as you saw on the drawing I did is they threw out their compiler and moved to V ever since then the developer experience has become so much better because they're not the ones steering the wheel when it comes to stuff like bundling and providing you the opportunities to add plugins and stuff like that that's all been moved over to wheat and whe has an amazing Community really dedicated to making your devel ER experience better and moving on now if it wasn't obvious enough the whole reason they're doing this is to make your lives easier and allow you to migrate your application just by changing the major version in theory if you've been keeping up with either remix or react router this is not a big deal for you because they've been adding incremental features by leveraging Future flags and what future Flags allow you to do is op into future features right now before the major is released and that incrementally allows you to move your app over to the latest and greatest stuff and this further allows you to have a better Pathway to the modern new react 19 and when we come to the last section of what's next we can see that they already mentioned this by saying that if you upgrade the latest minor version of remix or react router and enable all feature flags and change the package Imports you'll already be good to go for the future let's discuss what that all means I want to show you two rfcs by the remix team that have been open for a while now and one of them is already implemented and released as a future flag but this one is really interesting so this is the used the remix package and if you don't know what this is about it's the fact that remix is a monor repository that exports a lot of remix run/ X packages for every adapter they made for example for node or for anything else you would have to use the specific adapter and then you would have the remix run/ react and the most basic primitive that's underneath all the adapters is the server runtime one historically this decision was made to make remix more adaptable to a lot of other stuff they even plan to maybe Port it to other frame Frameworks like angular and View and stuff like that hence the remix run/ react but ever since they've given up on the idea they ended up with a lot of packages that you have to install and then you have to keep the versions synced and in line This RFC would allow them to basically bring everything back together into a single repository as that would allow you to easily update your remix versions and plus that would allow open source contributors or third party packages that rely on remix to be easily made because currently you would have to use a lot of these packages independently and then you would also have to sync them and you would have to worry about a lot of internal stuff this RFC is technically implemented now because what they're going to do is they're not going to use the remix package but move everything back to react router and if we scroll down here and look at the proposal you can see that's exactly what's going on right now so move all share code from remix runtime to remix move all code from remix run react to remix and third party packages can stop depending on remix server runtime and simply declare remix as a dependency so basically if I open up the console here I can just change this to react router and then change this to react router and then also we change this to react router and here we are the proposal is pretty much done but Jokes Aside this is what moving back to react Trower actually means and this makes so much more sense than them moving it back to remix package because the remix package has like 17K downloads a week and everybody keeps getting confused on the amount of weekly downloads even the react Summit got it wrong and they posted that remix has 17K weekly downloads which makes no sense and it's really even hard to track down how many downloads it has because you need to know which package is used across all projects and that's a hidden one called remix run/ router and that's it for this proposal but I want to look at another one and the other one is called single data Fetch and this RFC right here is already implemented at the time of making this video and this is a part of remix 2.9 onwards but let's go over it so what is allows you to do is is it allows you to create a single fetch on both the document and data requests coming from the client to the server and what this actually means is if we go over to our drawing board all right so imagine that we're on the Home Route basically the route of our the root of your application and we come here for the first time so what happens behind the scenes is that this makes a document request to your server and requests for all the resources on your server to pull in the document and show it to the user so what the server does is and for clarity sake let's not call this the root but let's say it's user slash info so this request would go to your server and what the server would do is it would fetch everything and then send it back and then let's say you navigate to a new route and that route is product/ one/ new and what would happen here all of these sub pads would make a separate request to your server and then the server would basically respond to each one individually and this was the reason why you would have to add guards into every loader because all of them fired in parallel and if you didn't protect all of your url sub pads you could end up exposing data that's sensitive and this is where a single fetch comes into play so what happens is instead of all of these requests there is only a single request to your server but the server is going to first get the single request then run your loaders in parallel and then when the requests are finished processing they are then sent back to the server the server batches all of them and sends them back to the client again so why is this important well first of all when you make these requests you can add middleware in the middle of it here and then what's going to happen is this initial request that was blue is going to go here and then you can do some extra logic and after all these parallel processing are done you respond from your middleware back to your server and then the server sends the response back so that's the first cool thing you can do with this single Fetch and the other one is consistency now this is going to be identical to the right side and then you have everything unified so that's the first thing about single data Fetch and the second thing is is that it allows you to send complex data types back to the client stuff like dates big and stuff like that because they use turbo stream beneath the hood which which allows you to even pipe promises and then resolve them on the client which is an amazing thing because you don't have to use the fur anymore and stuff like Json and then if you go back to the top you can also see a list of all the benefits I already talked about middleware then we have the server context the static data pre- regeneration the efficient sub request caching future RSC support more granular revalidation and this was the biggest major blocker for them to move on to all the other stuff that they had planned and now that this is done and alive this is getting merged back into react router and you get this for free and now coming back to the article once again and the biggest question in everybody's mind is what's happening to remix the tldr is it's going into hibernation and what that basically means is they have huge plans for it but they're just not ready to share them yet so they're keeping their mouths shut and until they actually have something to show us that's pretty cool and before I leave you off there's another thing I want to explain that might be a question in your mind and that is what is going to happen in the future so at the moment react router itself has three major packages and those are react router react router Dom and react router native so what's going to happen with react router V6 to V7 is react router Dom is getting merged into to react router so if we fix this Arrow up this and this gets merged into react router and react router native is deprecated which means that the react router team is now exclusively focusing on the web they're leaving the native stuff to some other tools Expo and moving onwards we're going to have react rou only and for the remix side you had a bunch of remix run/ something pack pages and I'm not going to go through all of them but the gist is remix run react gets moved to react router remix run/ server R time gets moved to react router and all the plugins that were here before so plugins specific to server run times for example Cloud fra and node are now being are now being moved to the react router sub packages and for node for example it gets moved to not cloud player but node and that's pretty much it other than these changes there's not much to It the remix run packages are just going to be not used everything is going back to react router and the specific adapters are going to their specific adapter packages and that's all you need to do but the cool thing about react router 7 that you're getting two new features that are SSG and react server components and this will be exclusive to V7 of react router it's not going to be a future flag in either the react router or remix run and this will be a really cool new addition and a great reason to move to react router and that's it if you have any more questions leave them down in the comments below and I really hope you enjoyed this one I've made sure to cover all bases and explain what's going to happen and if you want to keep track and know when this drops you should consider both subscribing to the channel because I'm going to be talking about react R7 as soon as it comes out plus you should go to remix Discord and hang out there there are some amazing people in there if you have any questions they'll be happy to answer and you can get some inside knowledge on the future of both remix and react router thank you for watching and see you in the next one bye

Channel: Alem Tuzlak

Views: 3,323

Keywords: REMIX, remix, remix.run, remix tutorial, react, code along, coding series, insightful, web development, react icons, vite, reactjs, react-router, react-router-v7, react-router v7, remix v3, remix-run v3, react server components, react future, future, details, must know, react-router-dom, react-router-native

Id: 8i72eWA6BqA

Length: 17min 56sec (1076 seconds)

Published: Sat May 18 2024