Как реорганизовать клиентский компонент Next.js в серверный компонент, сохранив при этом логику анимации isFetched? ⇐ Javascript

[Anonymous]

У меня есть сложное приложение, написанное на Next.js. Он извлекает информацию о пользователе в главном компоненте, а затем передает эту информацию дочерним компонентам (привычки, задачи, прогресс). Эти дети возвращают данные из базы данных для этого конкретного пользователя на основе полученных ими личных данных.
Проблема заключается в структуре моего кода — он не соответствует рекомендациям Next.js, поскольку основной компонент использует хуки, что делает его клиентским компонентом. В результате около 5% кода находится на стороне сервера и около 95% — на стороне клиента, что не является оптимальным решением по производительности. Я хочу сделать основной компонент серверным компонентом, чтобы оптимизировать приложение.
Я использую перехватчик isFetched для отслеживания получения информации с сервера. Причина в том, что мне нужно выполнить определенные действия (воспроизвести анимацию входа) именно тогда, когда информация получена из базы данных и готова к отображению. Я передаю свойство setIsFetched дочерним компонентам Main, чтобы получить эту информацию.
Я нарисовал диаграмму, чтобы визуализировать мою проблему:


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

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