Как работает Frontend вместе с Backend?

Question

[Алексей Жигалов]

Решил заняться изучением Frontend'а (в частности vue.js) и с первых дней столкнулся с одним вопросом - как взаимодействует фронтенд с бекендом?

Например я получил на бекенде массив из 100 пользователей и хочу его вывести списком. Как этот массив передать на фронтенд?
Можно конечно сделать так:

<script>
var json = <?=$json?>
</script>

Или отправлять Ajax на получения этого json'a.

Но как делать правильно?

Comments

[sim3x]

А код где?

[Алексей Жигалов]

sim3x, я не прошу помощи с конкретным кодом.
Я хочу понять как правильно передавать данные с бекенда на фронтенд

[sim3x]

Алексей Жигалов, фронт запрашивает данные с бека
Чаще всего через апи, чаще всего в фрмате жсон
Все данные, которые беку нужно отдать фронту (например конфиги или статичные переменые) можно передавать через дата аттрибуты

[Алексей Жигалов]

sim3x, если у меня очень большой объект, запрос через API будет относительно долгим, а хотелось бы сразу отображать данные на странице, без ожидания запроса на сервер

[sim3x]

Алексей Жигалов, обьект статичный? Фронт его перезапрашивать будет?

[Алексей Жигалов]

sim3x, статичный. Перезапросов не будет

[Алексей Жигалов]

Вроде бы нашёл ответ - нужно генерировать страницу с js на бекенде.
Нашёл вот такой пакет

[sim3x]

Алексей Жигалов, если "SPA" состоит из нескольких страниц, то логичнее все же запрашивать обьект из АПИ ака поместить его в кеш браузера
Если страница одна и она будет закеширована в браузере (чего делать не следует офк), то можно вставлять, как вы указали в тексте вопроса

И есть реальность, где нужно будет померять оба подхода и выбрать, тот что подходит

Answer 1

[Дима Паутов]

Создаются компоненты, которые в свою очередь через api и запрашивают нужные данные с сервера, полученные данные уже раскладываются как вашей душе угодно.

Т.е. имея компонент todo:

<template>
<ul>
  <li v-for="item in list">
    <h3>{{item.title}}</h3>
    <p>{{item.text}}</p>
  </li>
</ul>
</template>
<script>
export default {
  data(){
    return {
    	list: ''
    }
  },
  computed(){
  
// Запросим данные с сервера и сохраним наш json в data
    fetch('/api/users') // По этому адресу мы получим у сервера данные о пользователях
      .then((response) => {
      	this.list = response // запишем эти данные в data
      })
      .catch(error => console.error(error))
      
  }
}
</script>