How to prevent prop drilling with SSR in Next

116 Views Asked by Alexander At 21 October 2024 at 03:51

I'm wondering how I can prevent prop drilling with SSR in the following situation:

Layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUser(cookies().get("accessToken")?.value);

  return (
    <html lang="en">
      <body>
        <Navigation user={user}
        {children}
      </body>
    </html>
  );
}

Now imagine in Navigation there are multiple nested components that require the user. Normally I'd use the store to pass down data like this but now I'm a bit clueless.

Original Q&A

There are 1 best solutions below

Asplund On 21 July 2023 at 20:03 BEST ANSWER

Call getUser(cookies().get("accessToken")?.value) in the child components. This works because requests with the same path and input are automatically deduped by Next's polyfill of fetch.

From docs:

If you need to fetch the same data (e.g. current user) in multiple components in a tree, Next.js will automatically cache fetch requests (GET) that have the same input in a temporary cache. This optimization prevents the same data from being fetched more than once during a rendering pass.

Note: if you are not using fetch then use Next's cache feature

How to prevent prop drilling with SSR in Next

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in PROP-DRILLING

Trending Questions

Popular # Hahtags

Popular Questions