Генерация html c данными на стороне сервера либо получение данных при помощи ajax?

Question

[Максим Гонгалев]

Возникла проблема наполнения страницы данными, для себя определил два подхода:
1) Генерация абсолютно всей страницы на стороне сервера (с помощью Razor);
2) Сервер создает только страничку каркас, а данные наполняют ее посредством ajax запросов;

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

Во втором случае мы получаем практически полное разделение данных и скелета страницы, по сути можно полностью отделить разметку, закешировать ее, и воспользоваться для ее раздачи чем-то вроде CDN вместе с css и js файлами. Все данные будут поступать посредством запроса клиентского жаваскрипта. Соответственно сервер будет представлять собой некий набор сервисов поставки данных.

Используемые технологии ASP.NET MVC 4, AngularJs

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

Answer 1

[GM2mars]

Второй способ более правильный. Тем более что вы используете AngulaJS. При заходе на страничку (или шаблон) в контроллере запрашиваете данные. Лучше чтоб они приходили json строкой. При удачном ответе (когда данные пришли без ошибок) передаем ответ в какой нибудь $scope который парсится шаблоном. Все средства у Ангуляра для этого есть.
Выглядит примерно так:

Контроллер:

$http({method: 'GET', url: url+'/api/?action=get_res'}).success(function(res) {
  $scope.data=res;
}).error(function(res) {
  alert("error");
});

Шаблон:

<ul class="records_list">
  <li ng-repeat="item in data" ng-class="{important:item.important==1}">
    <span>{{item.name}}</span>
      <input type="checkbox" data-id="{{$index}}" data-uid="{{item.id}}">
  </li>
</ul>

Comments

[Максим Гонгалев]

@GM2mars да, изначально так и сделали, просто вопрос возник из-за преждевременной оптимизации, где-то на хабре прочитали про твиттер, и про то, как они переделали, что бы все генерилось на сервере. А в плане привязки данных к UI вообще Ангуляру равных нет. Единственный недостаток вашего кода, так это если страница большая, то юзер может заметить при загрузке фигурные скобочки (метки {{}} ), мы это обошли просто используя ng-bind (), тогда пользователь видит достаточно "чистую" страничку на момент загрузки.

[GM2mars]

Я такую проблему, с двойными скобочками, решал двумя способами: 1. ng-cloak (не отображать данные пока полностью не загрузятся (или что то в этом роде)) 2. Поверх блока с данными выводил абсолютный блок с индикатором загрузки и прописывал к нему директиву ng-show с условием, что когда придут данные, этот блок скроется.

Answer 2

[Александр]

Моё мнение пока сложилось следующим.
Генерация разметки в браузере целесообразна в том случае, когда необходимо отображать информацию из одних и тех же сущностей системы, но в разных представлениях (например в зависимости от роли пользователя в системе или в разных контекстах: как на страницах сайта, так и вообще платформах).
В иных случаях мне кажется смысла тратить на это силы нет.