Front-end и Back-end в чем разница отрисовки HTML в браузере?

Я как то вообще потерялся, пожалуйста обьяснение мне, или дайте книгу почитать, или что-нибудь исчерпывающее. Хочу разобраться... всё чешется уже!

У нас есть сторона клиента и сервера, сервер предоставляет некоторое API с которым взаимодействует клиент, В зависимости от его действий отправляются разные запросы на сервер, там происходит что-то с данными и отдаются клиенту. Сервер вытягивает данные из базы, как то их полирует, лепит куличик из JSON и отправляет на клиент, все довольны.

Но вот я узнал что можно делать front-end и на back-end через конструкции по типу <% %> и <%= %>. Например ejs у nodeJS или html.erb у ruby/rails насколько понимаю это SSR так называемый.

Зачем тогда React и подобные . если можно делать тот же компонентный подход на сервере, через шаблонизатор

Зачем тогда вообще это разделение на front-end и back-end если можно делать все на back-end, собирать через webpack и выплевывать готовый HTML на клиент.

Понятно что клиентская часть выполняется в браузере, а серверная соответственно на сервере, просто зачем тогда front-end разработчик, зачем специалист который специализируется именно на клиентской части, если можно все делать на back-end? Раз есть потребность во front-end разрабов, делаем вывод, что у шаблонизаторов и работы с клиентской частью через back-end есть какие-то существенные недостатки, какие? Я вообще правильно думаю или как?

Короче я в конец запутался, поймал уже когнитивный диссонанс, пожалуйста поделитесь своими версиями, материалами, хочу в этом раз и навсегда разобраться.