Sharing User Data Between Server Components of Different Pages in Next.js 14 #67330

abuzain432432 · 2024-06-30T19:26:58Z

abuzain432432
Jun 30, 2024

I am using Next.js 14 with the app router. In my main layout file, I am fetching user data using a server component and then sharing that data with a client component. I have a context provider that passes this data to the context, allowing me to easily access the user data across all client components on different pages.

However, I am facing an issue: while I can easily access the user data from the context in client components on all pages, I need to access this data in a few server components on other pages as well. How can I achieve this? Should I use cookies on the server side for this, or is there a better approach?

// NOTE SERVER COMPEONTS
import React from 'react';
import DashboardApplicationsMain from '@/components/DashboardApplicationsPage';
import {
  getAllProperitesNameAction,
  getMyProperitesNameAction,
} from '@/server/property-actions';
import { GetMyPropertiesNamesActionType, UserType } from '@/types';
import { getMeAction } from '@/server/auth-actions';
import { Roles } from '@/schemas';
import { redirectBaseOnRole } from '@/server/helper';

export default async function ApplicationsPage({
  searchParams,
}: {
  searchParams?: {
    page?: string;
    propertyId?: string;
  };
}) {
  const currentPage = Number(searchParams?.page) || 1;
  const userData = (await getMeAction())?.success;
  redirectBaseOnRole(userData, [Roles.ADMIN, Roles.LANDLORD]);
  let properitesData: GetMyPropertiesNamesActionType;
  if (userData?.role === Roles.ADMIN) {
    properitesData = await getAllProperitesNameAction();
  } else properitesData = await getMyProperitesNameAction();

  return (
    <DashboardApplicationsMain
      properitesData={properitesData}
      currentPage={currentPage}
      propertyId={searchParams?.propertyId}
      userData={userData as UserType}
    />
  );
}


import './globals.css';
import type { Metadata } from 'next';
import { schibstedGrotesk } from '@/config';
import { Providers } from '@/components/ui/Providers';
import Script from 'next/script';
import { getMeAction } from '@/server/auth-actions/index';

export const metadata: Metadata = {
  title: 'Muuve',
  description: 'Generated by create next app',
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const userData = (await getMeAction())?.success;
  return (
    <html lang='en'>
      <Script
        defer
        src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBQsfbCtd9rmGErPuJ96WVeMsKWseOCHWY&libraries=places'
      />

      <body className={`${schibstedGrotesk.className} bg-black500 `}>
        <Providers userData={userData}>
          <main className='scroll-bar-wrapper h-screen w-screen overflow-y-auto overflow-x-hidden'>
            {children}
          </main>
        </Providers>
      </body>
    </html>
  );
}


'use client';
import React, { Suspense } from 'react';
import store from '@/store';
import { Provider as ReduxProvider } from 'react-redux';
import { Toaster } from 'react-hot-toast';
import { NextUIProvider } from '@nextui-org/react';
import { FilterContextProvider } from '@/hooks/usePropertiesFilterCtx';
import { UserType } from '@/types';
import { MeCtxProvider } from '@/hooks/useMe';

export function Providers({
  children,
  userData,
}: {
  children: React.ReactNode;
  userData: UserType | undefined;
}) {
  return (
    <MeCtxProvider userDetails={userData}>
      <NextUIProvider>
        <Suspense fallback={<div>Loading...</div>}>
          <FilterContextProvider>
            <ReduxProvider store={store}>{children}</ReduxProvider>
          </FilterContextProvider>
        </Suspense>
        <Toaster
          toastOptions={{
            error: {
              duration: 3000,
              style: {
                background: '#ff3333',
                color: 'white',
                paddingRight: '2rem',
                paddingLeft: '2rem',
                borderRadius: '2rem',
              },
            },
          }}
        />
      </NextUIProvider>
    </MeCtxProvider>
  );
}

SouthLink · 2024-07-05T01:49:53Z

SouthLink
Jul 5, 2024

You can combine the cache function, and the server-only package to create a data fetching utility that can be used throughout your app.

sharing-data-between-components

The code looks like the following：

import 'server-only';
import { cache } from 'react';

const requestContext = cache(() => {
  return new Map<string, string>();
});

/**
 * @description Sets the request context for server components to share data
 * @param key 
 * @param value 
 * @returns 
 */
export const setRequestContext = (key: string, value: string) =>
  requestContext().set(key, value);

/**
 * @description Get request context
 * @param key 
 * @returns 
 */
export const getRequestContext = (key: string) => requestContext().get(key);

1 reply

abuzain432432 Jul 6, 2024
Author

Thanks for sharing. I will get to it once I am free

Hussein-Ali-6 · 2025-01-29T20:26:09Z

Hussein-Ali-6
Jan 29, 2025

I know this is late, but if you use fetch API inside getMeAction(), you don't need to use cache function from React, you can use fetch API anywhere in the server components and Next will make sure that this fetch request executing once.

for more information about request memoization, see https://nextjs.org/docs/app/building-your-application/caching#request-memoization

also see https://nextjs.org/docs/app/building-your-application/caching#react-cache-function

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sharing User Data Between Server Components of Different Pages in Next.js 14 #67330

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Sharing User Data Between Server Components of Different Pages in Next.js 14 #67330

abuzain432432 Jun 30, 2024

Replies: 2 comments · 1 reply

SouthLink Jul 5, 2024

abuzain432432 Jul 6, 2024 Author

Hussein-Ali-6 Jan 29, 2025

abuzain432432
Jun 30, 2024

Replies: 2 comments 1 reply

SouthLink
Jul 5, 2024

abuzain432432 Jul 6, 2024
Author

Hussein-Ali-6
Jan 29, 2025