reactjs - Next server-side components and context - Stack Overflow

admin管理员组

文章数量:1123794

Next.js (v15) clearly states that Context/Providers aren't supported, and instead you can simply put an await function inside a page, and they'll manage caching.

What is the supported way to not have to pass that state around deeply in nested components?

And how would one higher level component be notified (i.e. reactive) if a child component gets updated value?

For example:

// app/settings/page.tsx

export default async function SettingsPage(){
   const user = await getUser();
   return (
      <div>
          <widget1 user={user} /> // I really don't want to have to keep passing data
          <widget2 />
      </div>
   );
}


async function widget2(){
   const user = await getUser();
   // what happens if this user data gets out of sync with parent data?

   return <div>{user}</div>
}

Next.js (v15) clearly states that Context/Providers aren't supported, and instead you can simply put an await function inside a page, and they'll manage caching.

What is the supported way to not have to pass that state around deeply in nested components?

And how would one higher level component be notified (i.e. reactive) if a child component gets updated value?

For example:

// app/settings/page.tsx

export default async function SettingsPage(){
   const user = await getUser();
   return (
      <div>
          <widget1 user={user} /> // I really don't want to have to keep passing data
          <widget2 />
      </div>
   );
}


async function widget2(){
   const user = await getUser();
   // what happens if this user data gets out of sync with parent data?

   return <div>{user}</div>
}

• reactjs
• next.js

Share Improve this question Follow asked yesterday d-_-bd-_-b 23.1k4343 gold badges168168 silver badges281281 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I think what you're looking for is what can you do other than prop drilling -- what you mentioned.

If you want to pass a prop let's say down 10 children, a good idea would be to pass the prop onto a global state like context, redux, zustand, etc. So that you can access the state / data/ etc anywhere without drilling down.

It’s recommended to fetch data multiple times to share data between components on the server side. React will automatically deduplicate your fetch requests and only one request will be sent.

Context doesn’t work in server components but does work in client components. Since reactivity only happens on the client side, you’re free to use Context with client components to achieve it.

本文标签： reactjsNext serverside components and contextStack Overflow