Piping SAP OData into a modern frontend

SAP OData services are notoriously verbose, deeply nested, and allergic to modern JavaScript conventions like camelCase. Trying to consume raw OData directly inside your React components introduces technical debt, bloats client-side bundles with XML/JSON transformers, and leaks legacy backend quirks into your UI logic.

Enterprise data does not have to mean an enterprise-looking UI. The secret is placing a lightweight, typed API gateway between SAP and your React app.

One gateway, one DTO shape

The primary responsibility of your Integration Gateway (whether built via Next.js Server Actions, Route Handlers, or a dedicated Node.js middleware) is to act as an abstraction boundary. It performs three crucial jobs before data ever hits the browser: authenticating, flattening, and renaming.

Everything downstream in your React application should only see clean, strongly-typed, serializable Data Transfer Objects (DTOs):

export const getOrders = createServerFn({ method: "GET" })
  .handler(async () => {
    const res = await fetch(`${process.env.SAP_BASE_URL}/ZORDER_SRV/OrderSet?$format=json`, {
      headers: { Authorization: `Bearer ${process.env.SAP_TOKEN}` },
    });
    
    if (!res.ok) throw new Error(`SAP request failed [${res.status}]`);
    
    const json = await res.json();
    return json.d.results.map((r: SapOrder) => ({
      id: r.OrderId,
      customer: r.CustomerName.trim(),
      total: Number(r.NetAmount),
      currency: r.CurrencyCode,
    }));
  });

By mapping SAP’s PascalCase properties and stringified numbers (e.g., "150.00") into native JavaScript types at the gateway boundary, your frontend code remains clean, testable, and completely decoupled from SAP schema changes.

Batch, then cache aggressively

SAP NetWeaver Gateway endpoints can easily become performance bottlenecks if hammered with unoptimized frontend requests. To maintain high UI responsiveness, adopt these integration patterns:

• Combine requests with $batch — Collapse multiple REST calls into a single $batch HTTP POST request to drastically reduce network latency and server overhead.
• Cache master data aggressively — Reference data such as Plant codes (WERKS), Storage Locations (LGORT), and Currencies rarely change. Cache them at the Edge or Redis layer for hours instead of seconds.
• Sanitize error payloads — Never expose raw SAP Gateway XML/JSON stack traces or ABAP dumps directly to the browser. Log the detailed error server-side and return an actionable status code with a user-friendly message.

Treat SAP like a third-party API you do not control. Because that is exactly what it is.