React Frontend with Express: Server-Side Rendering or API-Based Architecture?

[TahaAyati-DevLab]

For a React frontend, is it better to render the views through the Express server, or should the React frontend communicate with the server through an API?

I'm working on a project with a React frontend and an Express/Node.js backend. I'm wondering which approach is generally better:

• Serving/rendering the React views through the Express server
• Keeping React as a separate frontend and communicating with Express through an API

What are the main advantages and disadvantages of each approach, and which one would you recommend for a typical modern web application?

[joshuablac]

I build exactly this setup (React + Vite frontend, Express + MongoDB backend), and for most apps I'd go with a separate frontend talking to an API.

Why:

• Clean split: Express only returns JSON and React owns the UI. You can deploy them separately (e.g. frontend on Vercel, API on Render) and redeploy each on its own.
• The same API can later serve a mobile app.
• Simpler dev experience: Vite's dev server with HMR, and Express stays small.

Trade-offs: you have to handle CORS (or proxy /api through Vite in dev) and auth across origins. In my own app I use jsonwebtoken for user sessions: an auth middleware verifies the token, and if it's missing or invalid it responds with res.status(401) in one central place, so the protected routes themselves stay clean and the React side just reacts to a 401. The first load is also client-rendered, so SEO and first paint are weaker.

Rendering React through Express (SSR) is worth it mainly when SEO or first paint really matter, like public marketing pages, blogs or e-commerce. Hand-rolling SSR in Express (renderToPipeableStream, hydration, routing, data loading) is a lot of work, though. If you need SSR, Next.js or React Router v7's framework mode does that for you.

Middle ground: keep the API approach, but have Express serve Vite's built dist/ folder in production with express.static plus a catch-all that returns index.html. That gives you one deploy and no CORS. In Express 5 the catch-all route is app.get('/{*splat}', ...), because the old '*' no longer works.

For a typical app (dashboards, anything behind a login), I'd start with the API approach and only reach for SSR when a page actually needs it.