Front-end and Back-end what is the difference between rendering HTML in a browser?

Question

HTML

I'm somehow completely lost, please explain to me, or give me a book to read, or something comprehensive. I want to figure it out ... everything itches already!

We have a client side and a server side, the server provides some API with which the client interacts. Depending on its actions, different requests are sent to the server, something happens with the data and is returned to the client. The server pulls data from the database, somehow polishes it, sculpts a cake from JSON and sends it to the client, everyone is happy.

But then I found out that you can do front-end and back-end through constructions like <% %> and <%= %>. For example, ejs for nodeJS or html.erb for ruby/rails, as far as I understand, this is the so-called SSR.

Why then React and the like. if you can do the same component approach on the server, through a template engine

Why then at all this division into front-end and back-end if you can do everything on the back-end, collect it through webpack and spit out the finished HTML to the client.

It is clear that the client part is executed in the browser, and the server part, respectively, on the server, just why then a front-end developer, why a specialist who specializes specifically in the client part, if you can do everything on the back-end? Since there is a need for front-end developers, we conclude that template engines and working with the client side through the back-end have some significant drawbacks, which ones? Am I thinking right or what?

In short, I got confused at the end, I already caught cognitive dissonance, please share your versions, materials, I want to figure this out once and for all.