How does Back-End and Front-End interact today?

Question

Backend

Good day. I have been working as a freelance web developer for a very long time. Previously, all sites were written essentially as follows: there is a front and PHP. PHP using the echo function renders html elements + its data from the database or somewhere else. In fact, we reload the page every time after such a request. Also, to solve the reload problem, we had Ajax, which essentially made it possible to send requests through JS without reloading.
However, I recently decided to try to return to the area already familiar to me, but I met great difficulties with understanding the work of current web applications. In fact, any modern web application works as follows: front and back communicate with each other with HTTP requests (the front throws a request, receives a response and exchanges JSON'om with each other) ??; then in JS, using conditional React, we make an HTTP request to the server (where PHP is conditional), then PHP only processes the request, works with the database and sends ready-made values ​​in JSON, which React already renders on the front? In fact, the only task of the back is to send a JSON file with the necessary information and that's it? What is the advantage of this approach? Not only because of the lack of a reboot ...

Thanks in advance for the answer and the time spent on it :)

Answer 1

No, not all sites work like this (front/back split) - some are the old fashioned way. And not always a new approach is justified.
Basically, it makes sense where there is a lot of interactive - with the old approach, you still have to make api for all sorts of lazy-load / search / filtering, decide where / how the templates will be stored, in what format to transfer, etc. With the new approach, all this is responsible front, back provides only data.

• The most common use is http+json for front-back communication, but there are variations.
  
• With React, we don't make a request. React is something like an advanced templating engine. We make a request through js (browser api). The back only gives json.
  

Advantages:

1. You can separate the work of the front and back teams
   
2. It is possible to rewrite the front/back using the API interface as an interaction contract
   
3. Pure data runs between the front and back, without patterns. But see paragraph 3 of the shortcomings.
   
4. Transferring the load from the back to the front (rarely this is justified, but still).
   
5. Interface becomes more responsive (if done well)
   
6. Easier to test separately
   

Disadvantages:

1. More code, more competencies, more complex system
   
2. Indexing problems, mixed variants (SSR) are involved
   
3. Code size on the front, more load on devices
   

Surely not all listed - what quickly came to mind.