Evan Bacon – Fetch Once, Render Everywhere: React Server Components in Expo Router | App.js 2024

when react native was first announced nearly 10 years ago it had a very simple premise and that was web the good parts and from this basic concept react native has grown to become the most impactful framework for building client side applications today if we fast forward to now react native Powers hundreds of apps in the App Store trending list every single day and there's no signs of slowing down so where do we go from here I'm Evan bacon an engineer and the creator of exp router expor Router is the first file-based framework for building uh apps that work on both web and Native at the same time by simply creating files in the app directory uh you can instantly create robust navigation for both your native app and website it uses familiar web apis like a link and href to push between screens and it's also a nested router enabling you to organize routes into shared folders to create elements like tab bars headers drawers which work across you know children routs and of course the best part has to be that it uses native Primitives like a UI navigation controller on Apple devices so your you know gestures and your animations are all feeling truly native because they are truly native there's no way to tell that it's not native because it is native and starting uh you know day one we have access to the react compiler thanks to collaborating with the meta team this means that you no longer need to write use memo or use callback in your applications which is pretty sweet so a lot less code things are just truly declarative uh leading to a much better experience for both web like users and developers alike we'll be installing this in Expo CLI uh in the next version of uh XL CI when it comes out uh so pretty sweet if you haven't seen rat compiler yet I highly recommend checking it out but anyways there are many attributes to building native applications and and Expo provides solutions to most of them but all these Solutions are primarily targeted at uh client side applications and there's only so much that you can do with the client on its own things get really interesting when you start to involve the server when you bring in data fetching and server rendering from a data perspective most native apps operate essentially like single page websites uh this means there's slower performance and substantially less networking right everything is happening on the client nothing else is happening on the server now popular native apps such as Lyft Netflix Reddit you know so on and so forth all use some form of server driven UI in their production applications today uh and it's very complicated it's super hard to set up to configure to design and as a result it's Out Of Reach for most developers and most types of applications now they do this so that they can ab test and render different uis with a high degree of variation uh this is based on all sorts of things like criteria such as a user type location the currency uh they want to render different UI based on you know different criteria of the user and the approaches all vary in many small ways but they do share some common architecture such as using Json as semantic UI representation think of this like HTML but for custom native apps now we can see a pattern here server driven UI is an important system for building apps and it's just very inaccessible to Indie developers so what if we could make server driven UI available to everyone but also the most powerful version of it uh like ever imagined that's the goal of Expo router to do this we're bringing react server components the most Cutting Edge approach to server rendering to all platforms through expor router this is a huge undertaking as it will require re working many different libraries throughout the entire Universal ecosystem everything needs you know a couple refinements ranging to a ton of refinements uh but our official implementation of RSC for Universal apps is currently in early development however it is worth sharing the progress that we made so far at Expo because it's frankly pretty exciting to see what server driven apps are capable of now there's a lot to RSC such as server actions and concurrent routing and flights Etc but I figure it'd be easier to just show you guys what's possible in the form of a demo that we built at Expo now I've been really interested in AI lately you know just like everyone else on the internet uh but it's historically been pretty hard to build high-powered AI native apps and this is because streaming and server rendering are both critical aspects of working within llm but with react server components and expor router it's actually really really easy to build AI apps as I'll show you here so here I have a chat GPT like app which pings open AI via a react server action and streams in Native text from the server everything that returns back is at least partially server rendered so we can ask it a question like should native apps be Ser rendered which is a great question to ask it and of course it'll return something back like native apps are typically not server rendered apps or you develop using whatever things and this is because you know this is not something that people have traditionally done a lot or when they do they don't talk about it too frequently Now to create the server action we have another file which defines use server inside of a function this send message function over here uh and when we call send message which is fully typed it essentially is doing what an API route does it's making a network request to this code which runs on the server and then then we wrap it in suspense the suspense basically tells the connection to stay open until the promise resolves which means you can have a synchronous components inside of it and then down here we have an asynchronous function recursive text async react components pretty sweet and then we can incrementally uh recursively render through the text to render out all of our elements um and that's how we can create this effect right here now one novel aspect of exper router's server environment is that it's a multiplatform server now what this means is that when we call send message from an iOS device even though it's running on the server it knows to render the iOS version of react native text as opposed to the web version or Android versions so you essentially have like kind of a dimension of platforms a matrix a lot of complexity but it actually feels pretty sweet and this is just the basics we can scale this concept up to any native UI so let's do something a little bit more exciting when react native was first demoed they showed a truly native movies app and you had like push animations you could scroll through it it was so neat uh so I thought it could be fun to pull movies into this prototype somehow for inspiration I looked at what the state-of-the-art best possible AI apps had to offer in chat gp4 when you ask for movies it renders a bulleted list of markdown some text here after it searches Bing you know cool I also tried this with 40 and it's just a little bit faster and on Google Gemini it does the same thing but with images and links what we're seeing here is that this is just markdown with Expo we can do a lot better here we can match any query to search for movies send it up server render views stream them back down with Native UI menus links elements where we can then server actions to recurse back into it find more actors and then request another server rendered element uh pulling everything down from the client all these movie cards are rendered on the server we can even interact with Native apis by doing like create an event this will server render a calendar card which then can access the calendar permissions and then uh create an event so pretty sweet [Applause] oh overall way better user experience with a lot less reading but even more exciting than this cuttingedge developer experience or user experience is a developer experience cuz it only it is the same format as what we did with the text we're just using views and images because we have RSC this this semantic representation of our views uh so here we have a suspense boundary to show a skeleton loader while an ASN component fetches data and then renders the movies and streams them down it just makes sense to look at it feels great it's awesome and then to add the interactive elements because you can't have interactions on the server those need to run on the client we can Mark a wrapper component with used client which means that just this one boundary gets split out and executed on the client that code is bundle split out and loaded over the air when you uh when you want to interact with this component when it mounts this is what enables um all these different interactions where you have things like menus and touchables and so on and so forth so it's really easy to step between the two boundaries between client and server using this directive because after we jump through all of the Hoops required for Server rendering and trust me there's there's lots of Hoops we aren't just rendering to the Dom like we get to render to truly native views as if the app were built with first-party tools like xcode and Android studio um because you will be using xcode Android studio as well it's kind of like how you do today um so it's progressively rendered best practices is truly Limitless you get you know native scrolling just there there are no limits on this you get the best of web and all the power of native but the best part by far has got to be that it renders like this on every single platform we write this once and it runs everywhere mostly because I'm using a lot of Base Primitives like view image and text and loading animation and like animations so these especially work well across platforms but because we're also we're pulling a lot of our our logic out and moving it to the server so anything related to network requests are trly Universal because the server is you know it's agnostic to what the platform's doing now this is the part where I will attempt to live demo the app that I just showed you um the Wi-Fi is spectacular in here uh so uh we'll just go ahead and give this a shot all right yeah you can see see my computer here great let's connect to the uh the Hotpot oh man all right and then right here I have Expos CI running so you see whatever um and what I want to do is I basically want to show you guys the dev server running with my phone here this is this is my phone um and so you can see uh the client and the server as it's recursing back and forth between the two so here this is a development app an expo app we will connect it and we'll see how it goes so opening it up here in the background you can see see we're loading in all the flight chunks all the asynchronous bundles and we have our app so just like in the demo we can list some new movies press that button recurses back to the server comes forward starts rendering the suspense and we can see data fetching in the background I mean so you know the big chunk is when the data loaded in right um over here just like before you know we can like long press the select and here you see that there is actually a server action which is then recursing for more data and then fetching so I'd like to say that we have like timers to emulate the production environment and how that latency will work but the Wi-Fi is just doing that automatically so let's find you you go Challengers create an event just like in the thing there we go we can render out the views but we can also do other things like this is so easy I I demoed part of this last week and uh in the the last few days I just took all of the input that people have given about what we should add to the Prototype and I just built it in because it's so easy to use and I was really struggling to demonstrate that in the talk uh so I I just wrote a bunch more parts so here we can say um show me some classic Polish music and now what this is going to do is Ping the dev server and then render down a Spotify card and we can log into Spotify this uses Expo off session log in right there log oh man man everyone look away for just a moment it's perfect uh logs in oh man it's so slow you get to see all the states here we got all of our Polish music then streaming in um we're able to just encapsulate all of this logic everything required for Spotify authentication in a single component including the secret handshake that is required to get a Long Live token um never been before been anything quite like it uh but we can do a lot more than that too so let's look for um let's say uh show me things to do in crao so now it's going to Ping the dev server back here again any moment now and then it will ping Google Maps so we see it loading here we can see the animation as it's coming through pinging Google Maps there's all the Google Maps data in the background and now we can slide through a native map component so even though this content was server rendered it was able to stream down to the client where we can render a native map on top of it and then also look at just how how much data is loaded in the background here so RSC is automatically optimizing our requests by converting it into the minimal amount of RSC uh code required to stream down um so I think if we weren't doing that the network request would be a lot slower so we can come in here and we can uh let's see we got this Cathedral um we can select it and then we can get the weather in this area ping it back render us down a weather card that's pretty sweet we can also book an Uber over here um oh I do have the weather set to Fahrenheit we could switch that over to Celsius I know how you guys like that over here and uh we're still booking the Uber we have the Uber here we could request the Uber opens up the Uber app just like that and I've got an Uber to the location what is that pln1 18 I don't I don't know what that means so we can ask the uh let's see um convert whoa convert 18 pln to USD and then it will probably stream back and answer telling me how to convert it you know $4.50 that's nice but what about all these other numbers in here like 22 and such um well here's where things get really interesting so I don't have a card to just dynamically convert pln to USD I didn't create that card but the number one piece of feedback I got was that uh you know since all this is running on the server why don't we just have the AI write the elements just write the code and then render it and stream it down so I'm going to go ahead and try that live for the first time here and we'll see how it works um create a um currency converter component and now what's going to happen here is this is going to Ping open Ai and it is going to generate the component for us so there is no guarantee that the component will work and it it you know it's a nice venue to have code just error out on stage but there it is look at that it's pretty sweet we haven't tried it yet we don't know if it works so what are some of these numbers I mean they don't have to be exactly but 22 okay 22 pln convert to USD $5.50 so we do have it working and right up here we can see the actual code that it generated this is react Nate it's universal code it it wrote all of this code for us this code doesn't exist in there um we can scale this out in any direction we want to take it so we could also say um show me the locations as a to-do list you know cuz I wrote this locations map thing with like Vegas in mind and it doesn't work in like we just have flat buildings so a different form factor is better so here now we have a to-do list so we it's fully interactive like we have uh okay we have checkboxes I I said it was fully interactive then I remembered it might not be um yeah here we've got Expo checkbox we inform it of which uh libraries in the SDK it can use before it generates the code out for us um so yeah just like that and then we've got uh all of the locations from before so that is the iOS part of the we can just switch back over I mean like we got the dev server it's pretty good we have the dev server running right here this is expo Expo CI we just hit the W key and launch it right into the web so you know same deal as before we could say list some new movies and it'll launch the movies the craziest part is that I I I didn't have time to really thoroughly test that UI generation in the cloud thing so I have not tested that on all platforms yet but we can just try it here one idea I had was what if we create a chat UI component and see how this does we'll take a second I mean I didn't have enough time to add the loading indicator you know like the skeleton or maybe you watch the code stream in because it streams in all the code first and then we evaluate it so then it would look you know a bit bit snappier cuz we are getting instant response but looks like it it is making some progress there in the background what is his progress oh oh okay so we've got a little chat UI here we could say um hello appjs comp that's pretty sweet I can't believe that it's crazy that this is working um I mean it's not I planed this obviously this all works like um and of course use Expo so I mean why does it how does it even know to use my photo there like it generated this code here in the background like it it's okay so it has like my GitHub profile in there I guess it like knows maybe I've like informed it but then yeah here's all the code it's generating back here incredible all right let's switch back over the keynote real quick so that is what it looks like when we take the modern state of server rendering and Ai and then bring them universally to every platform with Expo router we are seamlessly gliding between client and server in a fully typed file-based framework for the first time ever you only have to configure complex apis for one platform and that's the server we waterfalls and parallel requests are all taken for you care of for you automatically uh because this isn't just some Rinky Dink server rendering system we have in here this is react server components this is the best that the web has to offer running universally on all platforms secrets are secured automatically static client code is automatically it's a remove from the bundle uh we we can SSG code in fact this code has the RSC requests uh pre-built at build time and embedd it in the bundle meaning if we start this app in airplane mode I probably should have did that when my phone was linked then it just fires up instantly uh the only time that you would actually hit a network request or interact with a server is when you're going to interact with the server anyways to make a fetch request so it still feels truly native very Snappy at a component level tons and tons of new benefits too many to go into just redefining what's possible with our mobile devices and enabling new types of apps to be built in record time now the app you just saw is running Expo SDK 51 react 19 in new architecture we're still actively developing the server renderer part that adds used client and used server and then the the part that actually deploys the server uh so if we move fast we can have an early beta out maybe by the end of this year but just to be safe we'll say 2025 so consider this in RFC is server rendering something that you want to see on Native I believe so I love using the system um I can't believe I was able to like get all that stuff working the last few days so the future is very bright I'm Evan bacon and this has been universal server components in Expo router but but but that that's there is one more thing that we'd like to announce today in the Expo team so to do that please join me in welcoming Cedric Vantin to the stage [Applause] Expo router has been our most ambitious project yet and it was clear for us from the start that traditional tools weren't going to help us build it out so we build new ones introducing today Expo Atlas Expo Atlas is a tool to visualizing and understanding your Expo bundle output right from the start it gives you an a complete overview of all compiled modules within your app with this you can easily spot like really big ones or relatively large ones like this one low Dash so where can we go from here how can we how can we see where it's imported and how can we resolve it so to do that we can just click it for the first time ever in react native you now have both the import and output source code for any modules within your whole project and it doesn't just end there with this you can easily Trace down where certain dependencies are imported or how it's being imported and especially why it's being imported now let's get rid of that lad Das real quick so there we go unlike traditional Source map explorers Expo Atlas updates right away so you can try different optimization approaches without having any distractions at all going back to our bundle overview we can easily spot that we just shaved 600 kiloby from bundle just by verifying where certain dependencies are being imported now Expo Atlas has helped us tremendously internally at Expo we believe that this tool has been fundamentally crucial crucial for all of our uh projects it helped us build out universal react server components it even helped us out create the new Metro resolver which is up to six times faster and it also required us to add support for nanc for meting to Expo it won't it won't have help your app have smooth animations though but it does help you iterate faster at scale which in turns enables you to move faster and build better user experience so try it out today you can try it out in any SDK 51 project using this feature flag you can also wait for the release blog post which should be up later today or tomorrow on expo. death. blog and we can't wait to see how you will use Atlas thanks [Applause] [Music] [Applause]

Channel: Software Mansion

Views: 3,271

Keywords:

Id: BK2xbPW2uUU

Length: 24min 42sec (1482 seconds)

Published: Mon Jun 10 2024