Direct Answer: How do you integrate a modern React dashboard with a legacy B2B API?The safest and most scalable method to integrate a custom React (or Next.js) customer portal with a legacy ERP or SOAP API is to build aNode.js/Express Middleware Layer. This middleware acts as a translation engine: it receives modern JSON requests from the React frontend, translates them into the archaic XML/SOAP format your legacy system requires, and caches the results (using Redis) to prevent your fragile legacy servers from crashing under high traffic loads.
If you are a CTO overseeingcustom B2B SaaS customer portal development, you have a massive problem.
You want to build a lightning-fast, beautiful React dashboard for your enterprise clients. But all of your company's actual data—billing, inventory, user permissions—is trapped inside a 15-year-old on-premise ERP system or a legacy SOAP API that takes 8 seconds to return a single query.
You cannot rip out the legacy backend. It runs the entire business. But you also cannot expose that fragile backend directly to your new frontend, or it will collapse under the weight of modern user traffic.
According to aMuleSoft Connectivity Benchmark Report, the average enterprise has over 900 individual applications, but only 29% are integrated. This integration gap costs companies millions in lost productivity and churned clients.
As an agency specializing inlegacy API integration with NextJS and React, here is our exact architectural blueprint for bridging the gap between a 2026 frontend and a 2010 backend—without breaking either.
The Problem: Why Legacy APIs Break React Dashboards
Modern frontend frameworks like React expect fast, lightweight, RESTful or GraphQL APIs that return clean JSON data in under 200 milliseconds.
Legacy B2B APIs (like old SAP, Oracle, or custom AS400 systems) are the exact opposite:
- Format Mismatch:They often use SOAP/XML instead of JSON.
- Speed:They are incredibly slow, often taking seconds to compute complex joins.
- Fragility:They lack rate-limiting. If your React dashboard makes 50 concurrent requests when a user logs in, the legacy server might crash.
- Security Risks:Legacy APIs rarely support modern authentication (like JWT or OAuth 2.0).
If you connect React directly to the legacy API, your users will experience a broken, lagging portal. Worse, you expose your core database to severeB2B SaaS portal security risks.
The Solution: The "BFF" (Backend-For-Frontend) Pattern
To solve this, we never connect the React frontend directly to the legacy backend. Instead, we architect aBackend-For-Frontend (BFF)middleware layer, typically written in Node.js or Python.
Here is how the architecture works:
1. The Translation Engine
When a user clicks "View Invoices" on the React dashboard, React sends a fast, modern JSON request to your Node.js middleware. The middleware catches that request, converts it into the clunky XML format your legacy ERP requires, and sends it to the old server. When the ERP responds, the middleware translates the XML back into clean JSON and sends it to the frontend.
2. Aggressive Caching (Redis)
Because legacy systems are slow, you cannot query them every time a user refreshes the page. We implement an in-memory datastore likeRediswithin the middleware.
If a user requests their monthly report, the middleware checks Redis first. If the data is there, it serves it to React in 20 milliseconds. It only queries the legacy API if the cache is empty. This reduces the load on your fragile legacy servers by up to 90%.
3. Modern Authentication Wrapping
Your legacy system might use outdated Basic Auth. We configure the Node.js middleware to handle modern, secure JSON Web Tokens (JWT). The React frontend authenticates securely with the middleware, and the middleware uses a hidden, secure service account to talk to the legacy API.
(Not sure if you should build this yourself? Read our guide onBuild vs. Buy for Client Portals).
Step-by-Step: Executing the Integration
If your engineering team is preparing for aReact dashboard integration, follow this exact pipeline:
- Audit the Legacy Endpoints:Map out exactly which endpoints the dashboard needs. Do not attempt to migrate the entire API at once. Only build middleware routes for the data the client portal actually consumes.
- Stand Up the Node.js Middleware:Host this on a scalable cloud provider like AWS (ECS/Fargate) or Vercel.
- Build the Adapters:Write specific functions in Node.js whose only job is to translate XML to JSON and vice-versa.
- Implement Rate Limiting:Protect the legacy server by rate-limiting the middleware. If a user spams the "refresh" button, the middleware should block the requests before they ever reach the ERP.
The Financial Impact
Integrating a modern frontend with a legacy backend is the most complex phase of development. When budgetinghow much a custom B2B SaaS dashboard costs, you should allocate at least 40% of the engineering budget strictly for this middleware and integration phase.
By investing in this architecture, you breathe new life into your legacy systems. You get the conversion rates and enterprise appeal of a 2026 SaaS product, without the multi-million dollar cost of replacing your core business infrastructure.
