Server‑Driven UI: Transforming Frontend Development with Real‑World Benefits

This article is translated from "Sending UI over APIs" and introduces the approach of rendering UI pages via APIs, commonly used for dynamic client rendering and operational activity pages. It mainly fetches the UI structure from the server.

Sending UI over APIs changes how we think about UI and is also known as server‑driven UI. Compared with traditional UI development paradigms, this approach is more flexible and is reshaping modern UI development.

Server‑driven UI is not just a theoretical concept; companies like Instagram, Lyft, and Airbnb already use it to deliver dynamic content to millions of users.

This article answers what server‑driven UI is, how it works, why it matters in modern JavaScript development, its pros and cons, and how to implement it in your projects.

Understanding Server‑Driven UI

Server‑driven UI represents a new UI development method where the UI is dynamically generated on the server via APIs and sent to the client. This enables faster iteration and more personalized user experiences.

Challenges include app‑store guidelines and offline user experience, but it offers a new direction for UI development.

Unlike traditional UI, server‑driven UI generates UI on the server and sends it to the client as JSON, which the client renders. This allows server‑side UI updates without client changes.

The UI becomes dynamic and flexible, changing in real time based on user behavior, A/B test results, or new feature releases. For example, Builder.io uses this method in its SDK, accepting JSON input and rendering components based on visual designs:

<code>import { BuilderComponent } from "@builder.io/react";

export default async function MyPage({ params }) {
  const builderJSON = await builder
    // Get page content JSON from Builder using the URL path
    .get("page", {
      userAttributes: {
        urlPath: "/" + (params?.page?.join("/") || ""),
      },
    })
  return (
    <>
      <YourHeader />
      <BuilderComponent content={builderJSON} model="page" />
      <YourFooter />
    </>
  );
}
</code>

This method offers several advantages: faster iteration because changes on the server instantly reflect on the client, and it enables backend developers to participate in frontend development by defining UI structure and behavior on the server.

However, server‑driven UI also faces challenges such as rethinking UI development, handling operations, and maintaining a smooth user experience. Careful planning and implementation can overcome these challenges.

Server‑Driven UI in Instagram

Instagram’s adoption of server‑driven UI provides a compelling case study. The social media giant developed a technology called “blocks” that uses the server‑driven UI concept to deliver dynamic content and updates.

Steve Sewell (CEO of Builder.io) and Yaser Alkayale (Instagram/Meta engineer) discussed sending UI via APIs.

In Instagram’s implementation, the server sends a tree‑structured set of blocks to the client. Each block represents a part of the UI and includes information about which component to render and which props to pass. The client traverses this tree and renders components as specified.

This approach allows Instagram to update the UI instantly without pushing a new app version. For example, if a bug is found in a specific UI component, the server can stop sending the corresponding blocks, fixing the issue for all users immediately.

It also enables faster product iteration: the product team can change the UI on the server and see the changes instantly in the app, leading to a more agile development process.

Benefits of Server‑Driven UI

Adopting server‑driven UI brings many advantages that can significantly improve the development process and end‑user experience.

Instant bug fixes and faster iteration: as demonstrated by Instagram, UI changes on the server are reflected immediately on the client without requiring user updates or lengthy app‑store review processes.

Backend developers participate in frontend development: server‑driven UI blurs the line between frontend and backend, allowing backend engineers to define UI structure and behavior directly.

Dynamic and personalized user experiences: the server can send different UI based on user behavior, preferences, or A/B test results.

Reduced client complexity: moving most UI logic to the server makes the client lighter and faster, improving performance and fluidity.

Practical Guide to Building Server‑Driven UI

Building server‑driven UI may seem daunting at first, but with a clear understanding and practical steps, it becomes manageable. The steps are:

Create a tree structure: each node corresponds to a UI component and includes information about which component to render and which props to pass.

Handle operations: include operation handlers in components that send requests to the server, which can respond with a new UI tree.

Use JSON format: represent the UI tree in JSON for easy transmission via API and client parsing.

Implement a rendering engine: on the client, traverse the UI tree and render components as specified.

Test and iterate: thoroughly test the server‑driven UI and improve based on findings.

Roles of Server‑Driven UI

Instagram’s use of server‑driven UI demonstrates how this innovative approach works in practice. The “blocks” technology delivers dynamic content and updates to users.

Builder.io’s CEO Steve Sewell and Instagram/Meta engineer Yaser Alkayale discussed sending UI via APIs, describing how the server sends a tree‑like set of blocks that the client renders.

This method enables Instagram to update the UI instantly without releasing a new app version, fixing bugs across all users by simply stopping the transmission of problematic blocks.

It also allows faster product iteration, as the product team can modify the UI on the server and see immediate changes in the app, fostering a more responsive development process.

Addressing Challenges of Server‑Driven UI

While server‑driven UI opens new possibilities, it introduces considerations developers must address:

App‑store guidelines: ensure your server‑driven UI complies with store policies to avoid review issues.

Offline user experience: implement caching strategies to maintain a consistent experience without network connectivity.

Performance considerations: optimize network requests and rendering techniques to keep the UI smooth.

Increased complexity: manage the added complexity with well‑structured approaches and clear responsibility division.

Despite these challenges, thoughtful planning and execution can make server‑driven UI a valuable addition to your development toolkit.

Conclusion

Sending UI via APIs or server‑driven UI represents a significant shift in UI development. By moving most UI logic to the server, this approach offers dynamism and flexibility that are reshaping the industry.

From instant bug fixes and faster iteration to enabling backend developers to contribute to frontend work, server‑driven UI provides many benefits, including more personalized experiences and reduced client complexity for better performance.

Although challenges such as app‑store compliance and offline handling exist, careful planning and strategic approaches can effectively address them.

In the advanced JavaScript development world, server‑driven UI is not just a theory but a practical method adopted by major platforms like Instagram, pointing to an exciting future for UI development.