What is server-driven UI? Let's take a simple example and start to think about this and reason about it. If you have an e-commerce platform, React Cloth, and you look at the layout, oftentimes, the layout are dispersed sections of a screen. There might be an offers section, there might be recommended products, featured categories, testimonials, and a footer.
The whole idea is that we can define a JSON blob that comes from an API or CMS, and that is coming from the server, and it defines the layout of the page. You can see we've got a banner object within this array in the example on the right-hand side, which has a bunch of props, things like the telephone number, the address, the email, so on and so forth. But it might also have a little bit more complexity there. You might have a header, and some of the props include these objects like a menu which is an array of different menu items with their links, and so on and so forth. All of this is coming from the back-end or a CMS that you have.
Now, if we just take an example from this JSON, how do we then implement the React code or React native codes to actually render this? So, we would have almost a components.ts file imports all the different components that you have, and these are individual components, and then we would have a map to say what is the string that's coming from the server that represents that specific component? And then what we would do is we would create almost a generic render component function, and this uses the component map to check the config that's coming from the server and select the right component and pass in the right props that are coming in from the server, sort of dynamically. And then in something like our home page, what we would do is we would get the JSON data, let's say we just use a loader from some React query hook that we've created custom, and then we basically render everything in a map calling the render component. And that ultimately ends up resulting in the layout that we want, and all of that is coming from the server-side.
And if you want to just understand how widespread the usage of server-driven UI is, we can look at some of the big industry players that are using it. So, you've got the likes of Shopify, Airbnb, even though we don't like talking about them because of their whole React Native fiasco, and Lyft. So if we just quickly look at some of the mobile apps that are using this, for Shopify, they have a shop app that basically is a marketplace where different store owners can come and create their own apps. And what they found was different stores with different sizes of items and different amounts of users will need different layouts showing different amounts of products and showing maybe certain bestseller sections for ones that have quite a lot of products. So it was important to be able to customize that so that you started using server-driven UI to give them that level of flexibility.
In Airbnb's case, their entire system of layouting is based off of server-driven UI, and they adopted it because they want a platform consistency across web, mobile, on iOS and Android. Obviously, if they use React Native, maybe they wouldn't need that as much, but the whole idea here was that they could control that with the server and not only sync that across their mobile and web apps, but also have unified components across the host experience to the user experience, to even different parts of the new functionality that they've released, such as the whole experience and stuff that they have where you can go on, let's say, a ship or something for an evening or go to a nice restaurant. So it was more to give them flexibility as they're building up new features to not have to rebuild everything and fall into the same problem that the Messenger team faced.
And lastly, in Lyft's case, it actually was due to the fact that they have this functionality for renting bikes, and this is very widespread in Europe, especially in the Netherlands. But they had this functionality where you rent out bikes, but they wanted to start adding scooters and there was slightly different flows for the bikes versus the scooters. And then they later introduced e-bikes as well. And server-driven UI allowed them to kind of dynamically control that layout as the user requirements were evolving and not need to really do a lot of rework in that process.
You may have seen recently Evan Bacon from the Expo team did a talk about RSCs within the React Native space. And earlier, myself and Evan had a sort of a Twitter exchange where I was talking about server-driven UI and how, you know, doing React on the server does not necessarily always equal RSCs. And, you know, Evan pointed out that RSCs are actually a small part of the server-driven UI universal story. And I couldn't agree more. They fit into a very small part of it. And so, I would highly recommend you watch the talk that Evan did at ReactConf where he's introducing the sort of universal React server components vision within Expo Router. So, that's just the QR code there for you to scan if you want to keep track of that and watch that later. And more generically, I talk about server-driven UI within the React world where I talk about also some of the challenges that come with it and go into a little bit more detail with some of the case studies. So, you can also scan that if you want to keep track of that talk so you can revisit that and go into a little bit more depth about what some of the challenges are and how you combat some of those challenges as you expand your server-driven UI usage within your app.
And thank you very much for joining the talk.
React Advanced 2022
Comments