How to process data transaction between front and backend?

Question

Let say, user A has the name of 'James' and trying to change it to something else like 'John'. It might be stupid to ask this question but how do you apply this change?

I retrieve the new data from database and send back to Frontend to rewrite the data. However, it seems like it could increase network traffics. I was thinking like, storing the value inside the frontend and then the backend signals success or failure with the HTTP status codes. Then, rewrite data inside the frontend.

However, what I made a mistake and there is a difference between actual database and the state inside the frontend.

-- updated

First of all, apology for unclear question in the beginning. So, my question is, how to deal with the updated data between front and backend.

As user update some field like his or her name. When, user does that, the frontend post-requests to the backend with the necessary data. However, the name variable is also stored in the frontend's state. When the backend responses with 200, then use that frontend-stored variable to update the frontend's name state. I thought this would save some network traffic sending back the data for large-scale websites.

Currently, I've doing with the 2nd method. Get the updated data from the backend and send back to the frontend with the response. And then, the frontend just rewrites with the data.

I was just wondering how websites would take care of this. After watching optimization videos that for a large scale site, even few kb matters in order to boost up the speed.

Again, I am sorry for the unclear question in the beginning. And, hopefully this would clear up my questions.

Answer 1

There are several ways to manage the front-end and back-end user interface. It's very important to realize that the two operate independently, so both will be maintaining state. The important difference is that the back-end has the authoritative state. Meaning that if there is a discrepancy between the two, the back-end is correct.

One of the ways many modern sites handle this duality is by making the back-end all API calls, and the front end is a Single Page App (SPA). Whether you use Angular, React, or some other front-end framework, they each have a way of receiving data from the back-end and knowing which parts of the screen need to be redrawn.

In this scenario, you will have a JSON representation of the user that both the front end and the back end agree on. If your user is allowed to change their name then the interaction would be something like this:

• User interacts with a form that was drawn with the current user data
  • User changes name from James to John
  • User clicks the "Save" button which submits the form
• Front end sends a POST to the back end telling it that state needs to change
• Back end processes that information
  • Saves the change to the data store (commonly a database, but not always)
  • Returns 200 OK with the new user JSON object in the response body
• Front end receives the object, and updates its state
  • The front end state management recognizes a change
  • Notifies all components rendering from that JSON that there is a change
• The front end redraws itself with the new information

There was a style of development or web framework where the backend would handle rendering the whole screen, or a portion of it. That's now less common, due to the maintenance and the speed at which changes can be done. When you decouple the look and feel from the data, it opens you up to a richer user experience, with an appropriate amount of network traffic. Another benefit is the lower load on the CPU and memory required to render that information in the back end.