frontend server obtain data from backend server, or frontend server return page with javascript that obtain data from backend server?

Question

I'm currently learning how to separate frontend server and backend server. However, i'm not sure which approach should i take between the two

1. Frontend server obtain data from backend server and adjust pages based on result

In this approach, user connect to frontend server, then frontend server connect with backend server and gives all the necessary information (user ip, cookie, post data, ect) to backend server. The backend server then return json and cookie data to frontend server. The frontend server then adjust the pages based on the data obtained from backend server, and set cookie on user browser. If there is redirect request from backend server, then frontend server redirect the user.

This approach is quite complicated because it require the frontend server to coordinate with backend server regarding what data should be sent to backend server. The latency arising from frontend server connecting to backend server is negligible because they're hosted on same server.

2. Frontend server is just a server hosting static page file, and the page file contain javascript to connect to backend server and adjust the view based on the data obtained from backend server

In this approach, when user connect to backend server it already send all the necessary data (post data, cookie data, user ip, ect), and so there is no need to redirect data unlike the first approach.

However the drawback of this approach is that it increases the speed at which webpage is loaded, because user need to download the page first from frontend server before actually connect to backend server.

When should i use the first approach and when should i use the second approach? is there other approach other than these two approach? Currently i'm learning on how to do it using xampp apache server running php, which approach is better for php server?

First of all, i haven't found any reference nor book on how to separate backend server from frontend server, and these two approach are just my guesses on how to do it. And so if these two approach are actually a bad approach and there are better approach to do it, then forgive me and feel free to tell me about it. If you have book or reference on how to separate backend server from frontend server, then can you please tell me about it ? thank you.

Answer 1

The second approach has several benefits over the first one.

1. The work of adjusting the rendered page with the information from the back-end server is distributed to all the various client devices, instead of you having to maintain a heavy-duty server to do it.

2. On the initial page load, the browser can start rendering the page, with placeholders for the information that needs to come from the back-end, as soon as the static page with javascript has been retrieved. In the first approach, the user has to wait until the front-end server has finished updating the page and can start serving the modified HTML.

3. On subsequent pages, there is no need to retrieve the static part again. It is sufficient to fetch new information from the back-end. That saves bandwidth and time.

Answer 2

If you're taking the second approach, then be aware that you should never trust code running on someone else's machine.

There are ways for a user to dynamically replace the javascripts on a web page with completely different scripts. Which means that all requests that the scripts make to your backend need to be validated to check that the user is allowed to perform that request.

Answer 3

The second approach is best for the frontend server to return a page with JavaScript that obtains data from the backend server. The approach where the frontend server returns a page with JavaScript that gets data from the backend server is favored for its flexibility, scalability, and separation of concerns.