В приложениях SPA часто возникает общая проблема, и это количество запросов AJAX, которые выполняются для инициализации состояния вашего приложения после того, как страница готова.

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

Моя цель — отобразить страницу с минимальным количеством запросов… то есть всего с одним.

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

Под словом «состояние» я подразумеваю, например, данные вашей базы данных или даже данные сеанса пользователя.

Таким образом, вы получите нечто подобное, динамически отображаемое в ‹шапке› страницы.

var data = {
  sampleStore: {
    title: 'Hello world!',
    products: [{id: 1, name: 'Apples'}, {id: 2, name: 'Peaches'}]  
  }
}

А это мой магазин.

Вы можете видеть, что в конструкторе я проверяю наличие данных в глобальном объекте окна. Вы также можете искать данные вне хранилища, а затем передавать их конструктору (возможно, это даже лучше).

По соглашению свойство может иметь то же имя, что и хранилище.

Пример на Typescript, но вы можете проверить, как работать с конструктором со стандартной функцией Javascript.

Я думаю, что это действительно простой и мощный подход, верно?

С ReactJS, VueJS и другими библиотеками у вас есть возможность визуализировать представление на сервере, а затем гидратировать его на клиенте после первой загрузки.

Но не очень просто создавать изоморфные приложения, особенно если вы не используете JS на сервере.

Я думаю, что если вам нужно, чтобы Google проиндексировал ваш контент, такую ​​страницу, как сообщение в блоге или газету; тогда ReactJS или другие подобные технологии на самом деле не нужны для рендеринга страницы.

Он точно есть… но я пока не попадал в ситуацию с рендерингом представления на сервере, только потому, что рендерить на клиенте слишком тяжело (но как обычно жду ваших примеров).

Ваше здоровье.