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

Question

[Владимир]

Начал осваивать 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 в этом случае? Как правильно организовать загрузку и передачу данных в таких случаях?

Comments

[Daishinkan]

Этот компонент в page.jsx/page.tsx используется?

код

function getData() {
    const res = {message: "Твои штучки"}
     
    return res
}

export default function Page() {
    const data = getData()
    return (
        <div className="stack">
            <h1>SignIn - {data.message}</h1>
        </div>
    )
}

Насколько я понял твой вопрос, ты можешь подгружать штучки в режиме серверного рендеринга. getData полностью в твоем расположении, получай данные откуда хочешь