> Как в SSR составляется состояние для рендера? (JavaScript)

В серверном рендеринге (SSR) состояние для рендера составляется на стороне сервера перед отправкой HTML клиенту. Процесс обычно включает следующие шаги:

1. Инициализация хранилища: На сервере создается экземпляр глобального хранилища (например, Redux store, MobX store или контекст React), который будет содержать все необходимые данные для рендера страницы.

2. Загрузка данных: Сервер выполняет асинхронные запросы к API или базе данных для получения данных, специфичных для текущего маршрута или компонента. Например, для страницы пользователя загружается профиль, для списка статей - массив постов.

3. Заполнение состояния: Полученные данные помещаются в хранилище. В Redux это dispatch actions, в MobX - мутация observable-свойств, в React - установка контекста или пропсов.

4. Рендер в строку: Компоненты рендерятся в HTML-строку с помощью renderToString (React) или аналогичных методов. Хранилище при этом уже содержит полное состояние.

5. Сериализация и инъекция: После рендера состояние сериализуется в JSON (например, JSON.stringify(store.getState())) и вставляется в HTML-документ как глобальная переменная, обычно в тег <script>:

   HTML
   <script>
     window.__INITIAL_STATE__ = {"user": {"id": 1, "name": "John"}};
   </script>

6. Гидратация на клиенте: При загрузке страницы клиентский JavaScript считывает window.__INITIAL_STATE__ и инициализирует локальное хранилище этим состоянием, избегая повторных запросов и обеспечивая консистентность между серверным и клиентским рендером.

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