Build HTML page via PHP or Javascript? Server-side vs. Client-side - server-side

Question

Helo,
So I have a web server that generates a PHP object, and I build the webpage depending on that object (I have a HTML builder that literally echo the commands) and it is going great as I am using OOP so I maintain my code easily.
I understand that load-wise, it is a choice between server-side and client-side load and this is not a concern for now. Please correct me if I am wrong, and let me know your thought about this if you have any.
I also have a JS code to work with the PHP-built HTML page, and I can recognize two types of pages now, one of them confuses me a bit:
Passive Webpage
It can only display data and does not send feedback to the server. These webpages can either be done via PHP or Javascript, I see no difference there.
Active Webpage
This type is for pages that sends and receive (AJAX and others) requests from the server. Now I have two options which I can not decide over:
Build a PHP object, and pass it to JS to build the HTML.
In this case, JS should be aware of the full object, and it can easily manipulate it and make feedbacks. But, that would be making both JS and PHP understand the object, which means double the work on that field.
In this case, exchanging updates should be swell.
Build an HTML completely using PHP
This option requires JS to be aware of few, and not all, parts of the object (the parts that need update). This requires less work on JS, as it postpones possible work for the future (i.e. each new part of the object that needs updating should be understood be JS).
Now, I am kinda sure the second option is better, but the first option is faster for now (as I would like to have a working DEMO soon). At the same time, I am not totally sure, and I do not want to go too deep that it becomes harder to make a change of heart later on. What do yous think?
In case this was not clear enough, I will explain with an example.
PHP
Class A {
protected $_name;
protected $_id;
function Update( $aInstance ) {
// Give it an object, and it updates it. In case JS exchanges the whole object
}
function UpdateName( $newName ) {
// Updates the name only. Used in case JS updates parts of the object.
}
// Other setters, too.
function Draw() {
// Either returns the object as JSON or echos the HTML code.
}
}
class B inherits {
protected $_age;
function Update( $bInstance ) {
paret::Update( $bInstance );
// Update yourself, too.
}
// Other setters, too
function Draw() {
// Special draw, call parent's, or add to it
}
}
JS 1st option
var object;
function Draw( object ) {
// Handle all parts of the object.
}
function UpdateName() {
// Whatever happens when the name changes.
}
JS 2nd option
var header;
function DrawHeader() {
// Display the header somehow
}
var DrawName() {
// Display the name somehow
}
function UpdateName() {
// Whatever happens when the name changes.
}

Answer 1

As I understand the question is about handling HTML generation on the client side (JS) vs the server side (PHP). In almost all the modern web applications, the HTML part is now being handled on the client side. The HTML is generated either through providing static HTML files or through the JS based UI frameworks such as Angular/React or a combination of both. The idea of using server side code to generate HTML is pretty outdated now and there are very valid reasons for that. Please read about separation of concerns and MVC (model view controller) architecture. In simple terms, below are the reasons about why server side code should never handle HTML for most cases:
1) The biggest reason: to keep the user interface code separate from the server side code. If the UI is generated using server side code then it does not allow you to change the server side framework in the future. In this example, let's say if it would need to use Java or Go or Scala instead of PHP, then the HTML generation logic will also have to be moved or rewritten. However if your JS code is handling all the data via JSON, then the PHP code can be easily replaced with another language while keeping the JSON format same as before.
2) Any change in the HTML code will require recompilation, rebuild and re-deployment of the server side code if the HTML code is generated via server side code. However if it is kept on the client side, then no recompilation is required.
3) The HTML and UI is part of front-end engineering while server side is back-end engineering. So if the HTML code is written in the server side then it becomes very hard for front and backend engineers to collaborate and work on the same file, we definitely do not want this situation.
4) There are much better tools available for HTML design and manipulation that run on the client side and not on the server side.
5) If HTML generation happens on the server side, the same code to generate HTML is executed over and over again for each request. This is a waste of resources. Instead, if the HTML generation happens on the client side, the browser (JS code) will have to perform the HTML generation which significantly reduces the load on the server side.
There are numerous other reasons very well explained than how I managed to. In short, the HTML generation on the PHP side is not at all a good idea. Hope that helps!