Server-Driven UI: Building Dynamic React Applications

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Github
Rate this content

Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

Deepanshu's presentation is on server-driven UI (SDUI).

SDUI is important as it allows for seamless, personalized user experiences by enabling real-time UI updates and reducing the need for constant front-end deployments.

Unlike traditional UI development where the client controls the UI, SDUI shifts the responsibility to the server, which sends instructions on how the UI should be structured and rendered.

React's component-based architecture and virtual DOM make it ideal for SDUI as it allows for flexible, reusable components that can be dynamically controlled by the server.

Pros include dynamic UI updates and personalized experiences, while cons involve increased server load and potential latency issues affecting user experience.

Companies like Airbnb, Spotify, Netflix, and Amazon use SDUI to deliver personalized real-time experiences to their users.

SDUI addresses challenges such as maintaining adaptable interfaces amidst rapidly changing requirements and reducing the complexity and fragility of traditional UIs.

In e-commerce, SDUI allows for real-time updates of UI elements like promotional banners without needing to redeploy the front-end, enhancing flexibility and responsiveness.

Schemas define the UI structure and behavior, acting as a blueprint that guides the UI rendering process, allowing for real-time adaptability and personalization.

Server-driven UI (SDUI) is an approach where the server determines the UI layout and behavior, allowing dynamic updates without requiring front-end redeployments.

Dipanshu Gupta
Dipanshu Gupta
19 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
In this Talk, Deepanshu discusses the concept of server-driven UI (SDUI) and its benefits. SDUI shifts the responsibility of determining the UI from the client to the server, enabling dynamic changes without touching client-side code. React's component-based architecture makes it a natural fit for SDUI, allowing for flexibility and real-time control. The server sends a schema that guides the UI structure, and React components dynamically render the UI based on the schema. SDUI enables real-time updates, personalized experiences, and enhances the user experience. However, it also presents challenges such as increased server load and managing state. Examples of companies using SDUI include Airbnb, Spotify, Netflix, and Amazon.

1. Introduction to Server-Driven UI

Short description:

In this part, Deepanshu introduces himself and the topic of server-driven UI. He explains how server-driven UI can revolutionize UI development by shifting logic to the server and creating dynamic and responsive interfaces. Deepanshu also provides an overview of the session's roadmap, covering challenges in traditional UI development, the impact of SDUI on e-commerce applications, technical details, best practices, and real-world examples. The first topic discussed is the challenge of UI adaptability, where Deepanshu emphasizes the need for change to avoid longer development cycles and higher maintenance overhead.

Okay, hi everyone. Good morning, good afternoon, or good evening. Wherever in the world you're joining us from, my name is Deepanshu and I'm speaking on the topic of server-driven UI today. Before we dive into the session, I'd like to share a little bit of myself. I currently work at Red Hat with three years of experience specializing in front-end technologies. Much of my work has been contributing to open-source projects. I'm excited here to be at the Red Hat Advanced Conference and this is my first time speaking at this event.

So starting with this, in our fast-paced digital world, users expect nothing short of seamless personalized experiences. Traditional front-end development often struggles to keep up with these demands. That's where the server-driven UI, or SDUI, what I like to say it as, comes into the play. Today, we'll explore how SDUI can revolutionize UI development by shifting a significant portion of the logic to the server. This approach empowers us to create highly dynamic and responsive interfaces that can adapt to changing user needs in real time. We'll explore how this aligns with React's component-based architecture, creating dynamic and responsive UIs that can evolve in real time and without requiring constant deployments of our front-end applications.

So, whether you are a seasoned developer or looking to streamline your UI management, or someone who is just curious to learn about latest trends and technologies in front-end development, this session will offer valuable insights into how the SDUI can elevate your projects. So let's dive in. Before we jump onto the details, here's a quick overview of what we're going to cover today. We'll start off by looking at common challenges in traditional UI development, particularly how it is to keep interfaces adaptable to changing requirements. From there, we'll explore how the SDUI addresses these challenges and why React is such a natural fit for this approach. We'll then move on to the real-world example where I'll demonstrate the impact SDUI can have on the e-commerce application. Next, we'll get into the technical details, breaking down the core building blocks of the SDUI, discussing best practices for designing flexible schemas, and working through a code example to see SDUI in action with React. We'll also base the pros and cons of the SDUI and take a closer look at some of the companies that are already leveraging this approach in their applications. Finally, we'll open the floor for any questions you might have. So with that roadmap in mind, let's dive into the first topic, understanding the UI adaptability challenge.

Let's talk about a challenge that every UI developer knows all too well, that is adaptability. As developers, we often caught ourselves in race against time, constantly pushing to deliver new features while meeting the growing demand of personalized experiences. I'm sure many of you have felt the frustration of trying to keep your UI aligned with these rapid shifts, but the real challenge isn't just about writing more code to accommodate these changes. It's about the hidden cost adding complexity that makes the UI more fragile over time. What starts as simple interfaces can quickly turn into a tangled mess of interconnected components. And what's the impact? Longer development cycles, higher maintenance overhead, and an increased risk of disappointing users. Clearly, something needs to change in this.

2. Server-Driven UI and React

Short description:

SDUI shifts the responsibility of determining the UI from the client to the server, enabling dynamic changes without touching client-side code. React's component-based architecture makes it a natural fit for SDUI, allowing for flexibility and real-time control. Personalized UI and layout adjustments can be easily achieved by updating the server.

So we need an approach that not only meets the base demands for the power space environment, but also allows us to pivot quickly without sacrificing quality or speed. This is where the server-driven UI or SDUI steps in, a concept that's both elegant and simple and also powerful.

Picture this. Instead of having your UI logic locked into the client, where every change requires a tedious update and redeployment, you let the server take the lead. With SDUI, the server becomes a conductor of your user interface. The UI is no longer rigid, predefined, and structured. It becomes a dynamic, adaptable framework that can change in real time based on the server's instructions.

So how does this work? SDUI fundamentally shifts the responsibility of determining what the UI should look like and how it should behave from the client to the server. So instead of hard-coding the UI components at the interactions into the front-end, the server decides this. It sends detailed instructions, essentially a blueprint, telling the client what components to render, how they should be arranged, and how they should respond to the user interactions.

Now think of the possibilities you can have. You can now roll out the UI updates without ever touching the client-side code. New features, design updates, personalized content, all of it can be pushed dynamically just by updating the server. There's no need to go through the lengthy process of redeploying the front-end every time you make a change. With this approach, you are not just speeding up the development cycle. You are unlocking a new level of flexibility and scalability for your application.

As we explore SDUI further, we'll also see how this approach can revolutionize the way we build and manage user interfaces, especially when combined with a powerful framework like React. You might be asking, why is React the ideal choice for server-driven UI? This question strikes at the core of what SDUI is so powerful. React isn't just another powerful JavaScript library, it's a game-changer in how we build user interfaces. The magic lies in React's component-based architecture, a design that is inherently modular, reusable, and incredibly flexible. That makes React a natural fit for SDUI.

Let's break it down. As it hurts, React encourages us to think in components, small self-constraint pieces of UI that can be reused and reassembled throughout an application. These components act like a blending box, which the server can arrange dynamically based on the specific user context or situation. Imagine the possibilities. With React, you're not just coding a static page, you're creating a flexible component-based system that the server can control in real time. You need to adjust your layout for a limited type of motion. The server will simply send an instruction to React and rearrange the components accordingly. If you want to personalize the UI for different users, the server will provide different unique configurations and React renders exactly what each user needs to see. But it's just not about flexibility.

3. React's Virtual DOM and SDUI

Short description:

React's virtual DOM enables efficient updates in SDUI, making it well-suited for real-time and dynamic content. React and SDUI complement each other, creating adaptable, high-performance, and scalable UIs. We'll explore harnessing React's strength for SDUI and enhancing the user experience.

React's virtual DOM is another crucial advantage for SDUI. The virtual DOM acts as React's memory for the UI, allowing it to update the parts that need changing without re-rendering the entire application. This keeps the UI fast, responsive, and efficient even when the server is sending frequent updates. Think about it. React doesn't just render the components, it renders them smartly. When the server sends new instructions, React compares them with the virtual DOM, identifies the smallest changes necessary, and applies those changes efficiently. This makes React exceptionally well-suited for handling real-time updates and dynamic content, which are essential for SDUI.

In essence, React and SDUI complement each other perfectly. React provides the modular building blocks for the SDUI, and SDUI provides the blueprint. Together they allow us to build UIs that are not only adaptable and flexible but also high-performance and scalable. As we move forward, we'll dive deeper into how we can fully harness React's strength into an SDUI-powered application, and how this combination will elevate the user experience to a whole new level.

4. Server-Driven UI: Introduction and Benefits

Short description:

The server-driven UI (SDUI) differs from the traditional way of fetching data by sending detailed instructions on how the UI should be structured and rendered. This allows for real-time changes to the layout and behavior without redeploying the frontend code. SDUI allows for the entire UI configuration to be sent from the server, making it flexible and controlled. It transforms how e-commerce platforms and other applications manage their user interfaces. The building blocks of a server-driven UI application with React require a clear understanding of its key components and workflow, starting with the schema.

Before we dive deeper, let's address an important question here. How does the SDUI differ from the traditional way of fetching the data? In a typical setup, imagine a server fetching the raw data, such as the list of products or user details from databases. This data is then sent directly to the client, which takes care of rendering the UI by populating the predefined static components coded into the frontend. In this model, the client has full control over the UI, how it looks and behaves.

Now, let's introduce the server-driven UI. This approach fits the entire process. Instead of sending just the raw data, the server sends detailed instruction on how the UI should be structured and rendered. This server not only tells the client what data to display, but how to display it. What components to use, how to lay them out, how they should behave, and how they should interact with another component. In other words, the server becomes a decision-maker for both data and the presentation. The client simply follows the server's instructions and renders the UI exactly as specified. The level of control from the server makes the UI far more adaptable and flexible, allowing real-time changes to the layout and behavior without needing to redeploy or update the frontend code.

Now, let's consider a scenario many of us are familiar with when managing an e-commerce application. Imagine it's a holiday season and the e-commerce platform needs to update its UI to reflect the latest promotions, season themes, and personalized recommendations. In a traditional setup, this is easier than said. Because every time a promotion ends, a new one begins, or seasonal themes need to roll out, developers have to manually dive into the frontend code, update the UI components, rigorously test the changes, and redeploy the entire application. This process can be time-consuming and prone to delays and susceptible to bugs. Even a small mistake can disturb the user experience, leading to frustration and potential loss in sales.

This is where the SDUI truly shines. Rather than just sending the product data from the server while keeping the layout and other elements hard-coded in the frontend side, SDUI now allows you to send the entire UI configuration from the server. That includes everything from the homepage layout with promotional banners and personalized offers. With SDUI, when a new offer starts, developers don't have to touch the frontend code at all. They simply update the layout and promotional content on the backend side. The server can take care of delivering the updated UI instructions to the client, ensuring that the interface is updated in real-time without redeploying the frontend code. In essence, the SDUI is unprecedentedly flexible and controlled, transforming how e-commerce platforms and many other types of applications manage their user interfaces. It makes the UI update not only easier, but also responsive to the fast-changing needs of users and markets.

To explore further, the building blocks of the server-driven UI application with React requires a clear understanding of its key components and workflow. Let's break it down so you can see how it fits together. First, let's talk about the schema. Schema acts as the blueprint of the UI.

5. Server-Driven UI: Schema and React Components

Short description:

The server sends a schema that guides the UI structure. React components dynamically render the UI based on the schema, providing structure and interactivity. A demo showcases how SDUI works with a simple website built with React on the front end and Node.js with Express on the back end. The UI configuration is fetched from the back end and components are rendered based on the schema. Changes to the UI can be made by updating the schema without modifying the front-end code.

It's a structure format that defines everything from the layout of components to the interactions. When the server sends a schema to the client via an API, it's not only a set of vague instructions. It's a detailed map that guides us how the UI structure. The schema specifies what components to use, where to place them, how they should appear, how they should behave when the user interacts.

Next are the React components. In the SDUI architecture, React components are designed to be flexible and responsive to the schema provided by the server. The beauty of this setup is that the UI logic is no longer hard-coded into the client-side code. Instead, it's dynamically driven by the server, making the UI extremely adaptable to the change without requiring constant redeployments.

So how does it all come together? The server sends a schema which acts as a guide and the React renders the UI based on that schema, providing both structure and interactivity.

Now, enough talk. Let's dive into a demo. To avoid any last-minute server issues, which tends to happen a lot with me, I've pre-recorded the demo for you. Let's take a look at how the SDUI works in action.

In this demo, I'll walk you through the simple website built with React on the front end and Node.js with Express on the back end. First, let's look at the back end. Here we define the UI schema. The schema outlines various components like header, product list, banners, and footers, along with properties that control appearances and content. For this, we are using Express.js to create a server that dynamically serves these UI configurations. The schema is sent to the front end via the POST API.

On the front-end side, we can fetch the UI configuration from a back-end and dynamically render the corresponding components. I've structured the components in separate files to make them modular and reusable, aligning with the React's component-based architecture. Here's the website you can see, rendered with the content and data directly driven by the schema.

Now, let's make a change. Suppose we want to update the banner. We want to update the banner to display it like the last day for the offer, and also want to change the color to green. Instead of modifying the front-end code, we'll just update the schema here at the back end. When you have it, and there you have it. With a simple change to the schema, the UI is updated without touching the front-end code.

So, that was a quick demo. In case you want to look at the code, you can visit this GitHub repository.

6. Server-Driven UI: Flexible Schemas and Pros/Cons

Short description:

Flexible schemas are a fundamental aspect of SDUI, determining the structure and behavior of components. They enable dynamic UI updates and real-time personalization. However, SDUI also presents challenges such as increased server load and complexity in managing state. Offline support can be a significant challenge. Balancing the pros and cons is crucial when considering SDUI for your application.

I'll give a 2-second pause if you want to save this link.

Now, coming to these flexible schemas. Flexible schemas are a fundamental aspect of the SDUI. They form the backbone of user interfaces, determining both the structure and behavior of the component. It's essential to design schemas that can handle a variety of UI elements and scenarios.

Let's look at an example. Imagine an e-commerce app displaying its list of products on the home page. In a traditional setup, the front-end would manage the logic for displaying, filtering, and sorting the list. But with the SDUI, the schema defines a list component that can include optional filtering and sorting features.

The real power of the SDUI is that the server can dynamically enable or disable these options based on the user interfaces' needs or ongoing promotions. All without modifying the client-side code. Flexible schemas also enable real-time personalization. For instance, your schema might include logic that adjusts the UI based on the user behavior. The server can instantly modify the UI to reflect this, delivering a personalized experience tailored to each user. And all of this can happen without needing to redeploy or update the client-side application.

As you build your SDUI application, pay close attention to your schema. They form the foundation of your UI adaptability and are key to delivering responsive, personalized, and seamless user experiences. By investing time in designing versatile and powerful schemas, you are setting the stage for a UI that can evolve with the application, ensuring it stays relevant and engaging for the users.

Now let's explore the pros and cons of using server-driven UI. Starting with the pros, SDUI enables dynamic UI updates controlled directly from the server, allowing you to implement changes in real-time without requiring client-side updates. This means the app can offer personalized experiences, adapting the interface based on the user behavior and preferences, all without bloating the app size.

However, with these benefits, there are also some challenges. While SDUI provides great flexibility, it also shifts much of the load onto the server. This can result in increased server demand, and any latency or server-side issues can directly affect the user experience. Managing the state across both the server and the client also becomes much more complex, especially when ensuring real-time updates. Lastly, offline support can be a significant challenge. Without a stable connection to the server, much of the app's functionality could be severely limited. Balancing the pros and cons is crucial when deciding if SDUI is the right fit for your application.

7. Offline Support and Real-life Examples

Short description:

Offline support can be a challenge. Big names like Airbnb, Spotify, Netflix, and Amazon use SDUI for real-time personalized experiences. Airbnb dynamically controls layout and content based on user preferences, keeping the app lightweight. Share your thoughts and questions on the discord channel.

Lastly, offline support can be a significant challenge. Without a stable connection to the server, much of the app's functionality could be severely limited, and balancing the pros and cons is really crucial when deciding if SDUI is the right fit for your application.

Coming to the last, if you ask me who is using this exactly, big names like Airbnb, Spotify, Netflix, and Amazon are the prime examples of how this approach is being used to deliver real-time personalized experiences. Like, take the example of Airbnb for instance. They leverage SDUI to dynamically control the layout and content of their mobile app, offering the personalized experience based on the user location and preferences, all while keeping the app lightweight and highly adaptable.

If anyone from the audience is from these companies, please feel free to share your thoughts on the discord channel and share with us how you are achieving this. As long as this is not a trade secret, of course.

With that, I'd like to open the floor for any questions you might have. You can share your questions on the discord channel. In case you are using any other approach than server-driven UI, feel free to share your thoughts also. Also, if you want to reach me out, these are my handles. Thank you so much for your time.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.