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

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: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

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

abuzain432432 Jun 30, 2024

Replies: 1 comment · 1 reply

SouthLink Jul 5, 2024

abuzain432432 Jul 6, 2024 Author

abuzain432432
Jun 30, 2024

Replies: 1 comment 1 reply

SouthLink
Jul 5, 2024

abuzain432432 Jul 6, 2024
Author