Принцип взаимоотношений front & backend?

Вот щас камни полетят, типа уже много написано гугли. Но вот не получается для гугления внятно сформулировать запрос. Ссылка конечно приветствую :)

Я хочу в своем представление понять как выглядит работой фронтенда с бэкэндом и наоборот.

Например если фронтенд разрабатывается на каком-нибудь фреймворке с виртуальным dom, пусть будет vuejs, пишет стили на sass, все это собирается и выплевывается через сборщик, например gulp. А все шаблоны(представления) хранятся в html. Поскольку дом строит vuejs, роль бэкэнда с водится к тому что при(наверное до рендера дом) загрузке страницы от бека должны придти начальные данные(без лишнего кода, только данные) в data через xhr. А для всех остальных случаях, манипуляции с данными это реактивное связывание (Прим. Vuejs и что-то ещё) совместно с xhr.

Верно ли я представлю картину работы, и какова роль отдачи бэка уже сгенерированого dom при участии js фрейморков с виртуальным dom?