Are RSCs and NextJS Really That Bad?

now there's a lot of talk on Twitter and on Reddit about how the nextjs app Rider has destroyed react kind of comes down to two things for these folks one is who's controlling react I'm not going to get into that that's a bunch of Politics the other is about the developer experience people are saying that the app router is a terrible developer experience in comparison I guess to the pages router well I'm going to show you three examples of the app router simply destroying the pages router let's get right into it all right here's a simple test application that basically goes off and gets some test data for comments and for users there's two routes on it a homepage route and a users route now the homepage route only shows the comments and the users route shows both user data and also comments now let's go take a look at the code as it's implemented on the pages router so this is the code for the main index route what we're doing is get service ey props going off hitting this placeholder data then we're getting those comments back and we're passing that on to home home is then taking those comments and sending them off to the comment component which is basically just formatting them for it now the first thing you see right here is that the code is kind of spread out all over the place you've got the fetch over and get service side props home is actually doing prop drilling to get that data into comments and comments is just a dumb component that just does the formatting and it gets even worse if you look at the users's route the user route has to get two sets of data one for the comments and then one for the users and then prop drill all that down to those components so those can render so now you got both the index page and the users page going making the same request it's a maintenance nightmare now let's take a look at the app writer version of this in the Home Route we simply just import the commment component the commment component then goes and makes its own request the commment component which is one of the dreaded react server components is an async component that does its request goes and gets its data and then formats it and you see how much cleaner that is all of the code required to make comments work is just in comments the users route is just as simple we bring in comments we bring in users we put them wherever we want to on the page and users and comments components handle their own business users goes off and gets users comments goes off and gets comments and that's all it takes we don't have any prop drilling we don't have any duplication in the get service side props it's just so much cleaner now one of the issues with talking to apis on the back end is what happens when those apis are slow and that's something where the app Rider really excels let's go and add the ability to delay either the comments or the user's API let's go over and add a 3se second delay to comments and now to show this delay I'm going to start with about blank and now we can see a long 3 second delay before we get the data that's not great that's not a good customer experience so how do we fix that well in the app rouer simply bring in the suspense component and we can wrap any component we want in a suspense now watch now we get a nice loading fallback and then we get the data so easy you want to see how much it takes to do this on the pages router it's Bonkers now over in the pages implementation of this in our get service side props for that main route we're going to call this get comments server and this get comments server is a fairly complex function to return a promise that's either going to give you the array of comments if coming quickly or null if we time out in that request so we set a timeout to see if that API is taking too long and if it takes too long we return no otherwise we return the data that's pretty complicated already now let's go back to our index page so we get back comments or no we pass them on to our comments our comments component then has this handy use effect that if the value is null then it goes off and makes a request to a server endpoint on a API that also does the request for comments so that we fall back onto the client doing the request now I've set the comments delay to 3 milliseconds let's go see what happens to the browser so I hit refresh here we can see that we are loading comments from the client it's going off making the API request and then we have our result if we make the comments coming quickly then those load very quickly off the server and we don't make the client side request this is the cleanest way I get think of to do this kind of suspense work in the pages router but and it creates all kinds of problems first there's complexity the pages router version is just so much worse app Rider you just add a suspense and you're done second thing is you're adding an API endpoint for the client which is exposed to the open internet so now you've lost your ability to just have the server connect to your back end now it's actually exposing your backend to the open internet and the third is if you return null during the get service ey props then what goes to Bots that are looking at the SSR of the page is no data and that's actually fixed on the Apper side on the Apper side the app riter holds the connection open until all the promises throughout all of the suspens is finally complete and all the data is out there it just simply streams the new HTML in place and from a bob perspective the HTML just tends to come in just a little bit lighter it's very very clean and on top of that versol is experimenting with things like partial pre-rendering which add even more power to the suspense system so far we looked at data loading and shown just how much easier it is to use the app rouer to get data and display it next up we've looked at streaming and seen just how much cooler that suspense system is than any kind of hodgepodge we've created in the pages router finally we're going to take a look at interactivity and I'm going to show you just how wildly cool the server Action System is to make interactivity with the server so much easier so now we're just going to work with that Commons component and I'm going to add some filtering to our Commons you just type in some values and it automatically filters so how does that happen on the pages router well it all starts the homepage code where you have that get service ey props that goes and gets the comments and then sends them onto the comments component the comments component then takes in those comments and initializes some local state called search results it also has a search term that is managed by that input anytime the input changes we call handle change handle change then calls a local API comment search and that comment search is a traditional nextjs Pages riter API endpoint it gets the data and then it returns a filtered and sliced results now I've got this complexity strewn across three different components in the pages router we've got fetches in two different places what the heck how do we do this a lot easier in the app router in the Apper we just bring in the comments component just like we did before no changes at all the comments component brings in this new searchable comments component get to that in a second but then down in the implementation we first get our initial comments we then create a server action called search you can give this async function a search string it then gets comments filters them down and returns them back we then send the comments in this new async server action over to searchable comments so let's take a look at searchable comments searchable comments is a client component that means that it renders on both the client and the server it takes comments and that search action and that handle change function that was doing all that work of making the fetch getting the results back and all that and the pages router has now been simplified down to Simply setting the search term to the most recent value and then setting the search results to an await of the search which is that server action and nextjs is handling all of the transit of the search term and then all the search results back for us seriously y'all it's really that easy here it is live and I guarantee you can't tell the difference in performance between these two now let me show you one more thing about this that's going to blow your mind all of this code that you've just seen is available to you in GitHub for free in a link in the description right down below and one that you're really going to take a look at is the app search turbo repo the app search Project is the one that I just showed you but now I've got two things we got an app called app search but all of the components comments and also users is over in the packages directory under UI in the source directory we have exactly the same code that we did before with comments searchable comments and users you can see us making all of the fetches exactly the same code in both places and then using that we just go into apps app search we're bringing that same common code but instead of having it in a local file we're getting it from that local package so why is this cool well that means that any application can use that package and all of the complexity of talking to the back end is over in that package's UI all I need to do as a consumer of the comments component is just put it on my page all of the interactivity with a server action is all handled by nextjs I don't have to add any additional API endpoints I don't have to configure it I don't have to send any data to it it's all self-contained so you think this is all complex I don't know what to tell you honestly the developer experience is a breeze here it was so much easier to build these examples on the app writer than it was on the pages writer I implore you to try it for yourself go get this code try it out it's free check out the different app router versions versus the pages router version try and do a better Pages riter version I would love to see it but I'm telling you the folks telling you that the DX of the app riter is way worse don't know what they're talking about all right if you like this video hit that like button if you really like the video hit the Subscribe button click on that Bell and be notified the next time a new blue color coder comes out

Channel: Jack Herrington

Views: 42,323

Keywords: nextjs, server actions, next js 14, nextjs app router, next js server actions, react, next js router, nextjs react, reactjs, react.js, server actions next js, react server components, react useeffect, react js, react native, react app, react component, react forget, react use, react router, useeffect hook, useeffect async, react ui, react hook, shadcn ui, vercel image optimization, vercel deploy, app router, jack herrington, jack herrington react, next js best practices

Id: u0OMdWJfdhg

Length: 9min 54sec (594 seconds)

Published: Mon Jan 29 2024