Cover image for Stop Hardcoding UIs: Server-Driven UI in Next.js

Prajapati Paresh

The Hardcoded UI Bottleneck

In traditional frontend architecture, the UI layout is hardcoded into the client application. If the marketing team wants to move a "Promotional Banner" from the bottom of the dashboard to the top, an engineer has to rewrite the React code, push it to staging, pass CI/CD, and deploy it to production. This creates immense friction.

At Smart Tech Devs, we build highly dynamic, scalable platforms using Server-Driven UI (SDUI). Instead of the frontend dictating the layout, the backend sends a JSON payload that tells the frontend exactly which components to render and in what order.

How Server-Driven UI Works

In an SDUI architecture, your Next.js frontend acts as a "dumb" rendering engine. It has a library of pre-built React components, but it doesn't know how to arrange them until the backend tells it to.

Step 1: The Backend Payload

Instead of returning raw data, your API returns an array of component definitions. Note how the backend controls both the component type and its properties.


// 📄 API Response (JSON)
{
  "layout": [
    {
      "component": "HeroBanner",
      "props": { "title": "Welcome Back", "cta": "View Reports" }
    },
    {
      "component": "StatsGrid",
      "props": { "revenue": "$12,450", "users": "1,200" }
    }
  ]
}

Step 2: The Next.js Dynamic Renderer

In your Next.js application, you create a mapping system. It iterates over the JSON payload and dynamically mounts the corresponding React components on the fly.


import { HeroBanner, StatsGrid, FeatureList } from '@/components';

// 1. Map string names from JSON to actual React components
const componentRegistry = {
  HeroBanner,
  StatsGrid,
  FeatureList,
};

export default function DynamicDashboard({ serverPayload }) {
  return (
    <main className="flex flex-col gap-6">
      {serverPayload.layout.map((block, index) => {
        // 2. Resolve the component from the registry
        const Component = componentRegistry[block.component];
        
        // 3. Render it safely with the provided props
        if (!Component) return null;
        return <Component key={index} {...block.props} />;
      })}
    </main>
  );
}

The Engineering ROI

Server-Driven UI allows you to run instantaneous A/B tests, personalize layouts per user, and completely restructure your application on the fly—all without a single frontend deployment. It shifts control to the backend, enabling massive agility for product teams.