React Is A Backend Framework Now

if I told you you didn't have to write apis anymore would you believe me no probably not I mean come on but if Dan abramov told you you didn't have to write apis anymore then we'd have something to talk about wouldn't we well the new react version and all the hike around react server components starting to look like we might not need apis anymore sorry for the outfit I didn't feel like ironing a shirt anyways Daniel in quite the set of rants on Twitter and honestly it's reinvigorated a lot of my excitement about react server components as I've been playing with react server components more I've been starting to see the benefits but also struggling to wrap my head around the mental model thankfully Dan's tweets have helped me a lot and I'm starting to feel like I understand the ways server components benefit us as we build applications and react the animated thread collecting different ways to try and Pitch server components because he thinks it feels a lot like the old days of react and some of these analogies are really interesting I love this second one here including the server in the unidirectional data flow of react this one was a bit mind-blowing for me the beauty of react is you get to choose from here down this data exists and you can't really go up the tree without explicitly passing Setters down to lower components to update things higher up in the tree but you couldn't just mutate the data and expect the thing to change this unit directional flow is a huge part of why react scale so well it is so simple to work with and the thought of including the server in it it makes so much sense other Frameworks have tried this like remix or even next itself but the unidirectional flow there starts with the route so if your route isn't the place where you need the data it's somewhere else like a component you want to reuse that unidirectional nature of the flow kind of gets broken up in weird arbitrary ways react server components your component says what it needs and now it has it and honestly it's been really nice to work with all these other Frameworks have weird data loading patterns where the thing appears or use a hook to access it but in server components you just await the data it really does feel like you don't need apis this is an example I've been working on for a different video I think it really helps show the power of server components though this is an interface where tweets will be actual tweets it's Emoji only tweets this data is fetched on the server it's not on the client the client receives effectively HTML you have to worry about serialization of the data things like date times all that type of stuff how am I actually getting it there let's take a look at the code quick so in here I have a database connection that I'm executing that is firing SQL this is a component export default async function tweets and this component is executing a SQL query to get data I happen to know the type of this data it's tweet type but if I was using something like a Prisma or an orm that's aware of the different types of the things I'm fetching and when you have to assign the data type here I would just have it and now I can map against this and return these view components that's it I just await the data in this case a SQL call and I return the contents and now I have a component that I can mount anywhere in my application it is that simple Geo is even easier than fetching data in a server component subscribing to the channel the little buttons right there we talk about react typescript all sorts of stuff like this and less than half El are subscribed so please hit the button help us out a ton so what are the pain points in this example we are using state so theoretically this component would rerun whenever the state changes which means it would have to execute this which is why when we try and do this it's going to fail and if we take a look quick here we see the use State call isn't allowed because we haven't marked this as a use client file we mark this as use client file we'll no longer be able to do the database connection we'd have to put that in somewhere else this model is weird rather than an API what you kind of would want here is a component that wraps your component that interacts on the client so if I wanted a component here that had an input I'd have to create a separate file I can do that quickly input dot TSX and Export const input component I can paste that here return my copilot do its thing I don't need that it's an input component you silly goose here we go and M4 is state from react and all I have to do to make sure react notes this is client only is we put a quick use client on top and now rather than using that I can put on top here input component and since we marked this as use client it will now be safe for us to use what's cool here is I can pass props to input component so if I fetched some data here like I want input components to know how many tweets there are here I can pass count equals rows.number and then on input instead of having this be a string input I could have it be a you know I'll leave it to the string but let's say we want to put the current count here so Dev current count and crops count number any props.count we will wrap that bend it off we literally could just pass props okay it's rows at length sorry brain fart anyways the magic here is very specifically we can fetch data on the server and then pass that data to the client we normally read an API for this data to be accessible on the client the data flows from the component on the server including through HTML now that only exists on the server this code doesn't run on client this just is HTML as far as the client is concerned but on the server you can get the data and then for components that need to update you can pass that data from the server to the client just by passing props it's kind of magical and when that flow clicks I get it and remixes had a decent bit of this for a while I can admit that but there's something magical about with any given component awaiting data and then passing it to another component this component here this server async component it's kind of an API and that's the mind-blowing aha moment I had that and you get much more excited about server components the same way I used to wrap components in Hawks to give them data we can now write server components that are apis that wrap another component with data what about when data changes like this helps for the first paint but from there what about everything else this is actually built in to react as well in this example we have an iterator that encodes content sleeps then yields that again this is a generator which means a function that returns multiple things as like a stream the magic here is we can as an API return on this route an iterator that will change the contents of what it returns after 200 milliseconds that's insane that's so cool that a single function can send multiple things down and the client without needing to know anything else can render and do stuff with it it's possible that this will be exactly how we do this with components as well uh to be determined keep an eye out for that I couldn't be more excited for what these new apis entail and in reality the possibility that we might not need apis at all I was skeptical going in but I'm really starting to see the patterns still not sure how I feel about the file separation but I am certain there are things here that work and they work really well genuinely excited about the app directory I hope that you guys are too keep an eye out for the tutorial I have coming I am super hyped on that and check out the videos that are on the side here I think they're pretty good I worked my butt off on them and I'm wearing nicer clothes on them so

Channel: Theo - t3․gg

Views: 170,629

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: EhI6wb5nEEs

Length: 8min 29sec (509 seconds)

Published: Mon Mar 06 2023