Your question is completely valid, and many beginners in web development have similar thoughts when first encountering the frontend-backend separation. Let me break it down in a structured way.
1. Why Does the Backend Need a Separate Server?
The main reason is that the frontend (React) and backend (Flask/ExpressJS) serve different purposes and have different execution environments.
Frontend run in the browser. Cannot interact directly with databases, files, sensitive operations like authentication.
Backend run on a server. It has full access of databases, files, business login and sensitive operations. Backend can deal with multiple frontend clients.
2. Why Can't the Frontend Run Backend Code Directly?
Anyone can think, "Why can't the browser just run Python or Node.js directly?". Here's why:
Browsers are designed and developed for the execute only JS. Allowing backend code like python or nodeJS to run directly on a browser lead to security risk. By using it users can directly access the database and users can execute harmful code.
It mean if the frontend directly connect to the databases, anyone can read, modify, or delete the data without any restrictions. Backend server's main purpose is protect the database and handle the data.
Backend servers are developed for dealing with multiple client application with multiple requests, database operations, business logic, and interconnected with different services. Therefore Backend need more resources to be perform the heavy operations. But frontend need to be lightweight and responsive for users.
3. Why Does Fetching Data from the Backend Seem Complex?
You mentioned that using fetch to communicate with the backend feels like a proxy system and is unnecessarily complex. However, this separation has advantages:
We can develop Frontend and Backend independently. By using this method we can swap out a React frontend for a mobile application without changing the backend.
Instead of exposing database credentials to the front end, the backend acts as an middleware to authenticate and validate all requests.
A well-structured backend API (Flask, Express) can serve multiple clients (React web app, mobile app, other services). This architecture makes it easier to integrate with external services (e.g., payments, authentication).
4. Why Can't React Just Run Backend Code?
You may have noticed that React allows importing some modules, but not others, in Node.js use require. This is because:
React run in the browser. NodeJs run on the server-side. Browsers only support import. But require is part of NodeJS, It mean require using in only backend. However bundlers remove backend specific code. Such as Webpack, and Vite strip out NodeJS specific code when building the project. Therefor when building the project making backend login unusable.
My Final thoughts
YES , Backend Frontend separation is adds complexity, But it is necessary for security, scalability , and performance. Now a day modern applications are designed and developed this way so that different devices can talk to the same backend API without exposing sensitive logic to the browser. Would it be easier if browsers supported full backend capabilities? Maybe. But that would open up huge security risks and reduce flexibility.