@AstraVlad
Финансист, консультант, программист-любитель

Как правильно хранить стейт и загружать данные в Next.JS?

Начал осваивать Next.JS и понял, что не понимаю как лучше организовывать взаимодействие между компонентами с учётом SSR и server components. Например, есть вот такая простенькая структура:
<Things>
   <ThingsList/>
   <ThingDetails/>
<Things/>


В ThingsList имеем список "штучек", при выборе одной из них в ThingDetails открывается эта "штучка" для просмотра и редактирования. В обычном React я бы постарался вынести стейт по максимуму в Things, сделал бы там подгрузку из базы и хранил бы id выбранной "штучки". Ну и отдавал бы в дочерние компоненты уже готовые данные и всякие setSelectedThingID через пропсы.
<Things>
   <ThingsList items={things} onSelect={setSelectedThingID}/>
   <ThingDetails item={things.get(selectedThingID} onSubmit={onThingDetailsSubmit}/>
<Things/>


Но в Next серверные компоненты не могут использовать хуки и должны быть stateless. Писать везде use client - значит фактически отказываться от преимуществ Next, но как сделать без этого пока не понимаю (ибо тупой :)).

Что считается best practice в этом случае? Как правильно организовать загрузку и передачу данных в таких случаях?
  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы