В приложениях SPA часто возникает общая проблема, и это количество запросов AJAX, которые выполняются для инициализации состояния вашего приложения после того, как страница готова.
Этот шаблон, очевидно, очень плохо влияет на время загрузки вашей страницы.
Моя цель — отобразить страницу с минимальным количеством запросов… то есть всего с одним.
Поэтому, когда мы отображаем страницу с запросом, мы должны поместить все наше состояние в глобальную переменную.
Под словом «состояние» я подразумеваю, например, данные вашей базы данных или даже данные сеанса пользователя.
Таким образом, вы получите нечто подобное, динамически отображаемое в ‹шапке› страницы.
var data = { sampleStore: { title: 'Hello world!', products: [{id: 1, name: 'Apples'}, {id: 2, name: 'Peaches'}] } }
А это мой магазин.
Вы можете видеть, что в конструкторе я проверяю наличие данных в глобальном объекте окна. Вы также можете искать данные вне хранилища, а затем передавать их конструктору (возможно, это даже лучше).
По соглашению свойство может иметь то же имя, что и хранилище.
Пример на Typescript, но вы можете проверить, как работать с конструктором со стандартной функцией Javascript.
Я думаю, что это действительно простой и мощный подход, верно?
С ReactJS, VueJS и другими библиотеками у вас есть возможность визуализировать представление на сервере, а затем гидратировать его на клиенте после первой загрузки.
Но не очень просто создавать изоморфные приложения, особенно если вы не используете JS на сервере.
Я думаю, что если вам нужно, чтобы Google проиндексировал ваш контент, такую страницу, как сообщение в блоге или газету; тогда ReactJS или другие подобные технологии на самом деле не нужны для рендеринга страницы.
Он точно есть… но я пока не попадал в ситуацию с рендерингом представления на сервере, только потому, что рендерить на клиенте слишком тяжело (но как обычно жду ваших примеров).
Ваше здоровье.