How to prevent prop drilling with SSR in Next

Question

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.

score 1 · Accepted Answer · answered Jul 21 '23 at 20:03

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

Good thing one of us can read the docs. :D – Alexander Jul 21 '23 at 20:12 — Alexander, Jul 21 '23 at 20:12

How to prevent prop drilling with SSR in Next

1 Answers1