Лучший способ инициализировать данные в маршрутизаторе следующего приложения JS с помощью zustand ⇐ Javascript

[Anonymous]

Я создаю на Next.js веб-сайт типа электронной коммерции, на котором есть несколько разделов магазинов. На каждой карточке магазина имеется значок сердечка, позволяющий отметить его как избранное.
Один и тот же магазин может отображаться:

• в нескольких разделах
• и на нескольких страницах.

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

В чем я не уверен
Где и как мне получить избранные данные, чтобы каждая карточка магазина знала, помечено ли оно уже как избранное или нет?
Сейчас мой подход таков:

• Я получаю избранные данные, используя действие сервера внутри корня макет,
• затем я инициализирую магазин Zustand с помощью провайдера,
• карточки магазина считываются из магазина Zustand, чтобы определить, заполнен ли значок сердечка.

Мой вопрос
Это лучший подход?

разве это не плохо или не блокирует время загрузки, если я извлекаю данные из макета??

Если нет, то как рекомендуется это структурировать, чтобы:

• избранное синхронизировалось по всему приложению,
• магазины, отображаемые в нескольких местах, сразу же обновлялись при добавлении в избранное,
• Избегаются ненужные сетевые запросы?

Подробнее здесь: https://stackoverflow.com/questions/798 ... th-zustand