Совместное использование пользовательских данных между серверными компонентами разных страниц в Next.js 14

Я использую Next.js 14 с маршрутизатором приложений. В моем основном файле макета я получаю пользовательские данные с помощью серверного компонента, а затем делюсь этими данными с клиентским компонентом. У меня есть поставщик контекста, который передает эти данные в контекст, что позволяет мне легко получать доступ к пользовательским данным во всех клиентских компонентах на разных страницах.

Однако я столкнулся с проблемой: хотя я могу легко получить доступ к пользовательским данным из контекста клиентских компонентов на всех страницах, мне также необходимо получить доступ к этим данным в нескольких серверных компонентах на других страницах. Как я могу этого добиться? Должен ли я использовать для этого файлы cookie на стороне сервера или есть лучший подход?

На данный момент я планирую использовать файлы cookie, но ищу лучший вариант.

// 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}
    />
  );
}

Мне нужно получить пользовательские данные на стороне сервера, потому что на основе этого я получаю данные свойств.

у каждого из них есть свои компромиссы. вы можете использовать файлы cookie, это эффективное решение.

ishaan 30.06.2024 20:55

Можете ли вы быть конкретным? Какой подход лучше всего?

abuzain 30.06.2024 21:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
116
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Зависит от того, что вы подразумеваете под «серверным компонентом».

Вы можете передать свои фактические серверные компоненты в качестве реквизитов клиентскому компоненту самого высокого уровня на странице, что означает, что ваш клиентский компонент может получить доступ к контексту, а затем передать его серверному компоненту в качестве реквизита.

Или вы можете передать действие сервера в качестве реквизита клиентскому компоненту и вызвать его (с любыми необходимыми аргументами, доступными клиенту), например, обратный вызов при рендеринге страницы, onClick или что-то еще подходящее.

Позвольте мне еще раз прояснить мой вопрос, плз.

abuzain 30.06.2024 20:56

Другие вопросы по теме