1. 서버 액션에서 한꺼번에 처리

이 방법은 데이터 페칭을 하의 서버 액션에서 처리하고, 이를 페이지 컴포넌트로 전달하는 경우.

장점:

1. 성능 최적화:
   • 모든 데이터를 한 번에 페칭하므로, 네트워크 요청의 수가 줄어듭니다. 이는 특히 네트워크 레이턴시가 큰 환경에서 성능을 개선하는 데 도움이 됩니다.
2. 코드 간결성:
   • 여러 컴포넌트에서 필요한 데이터를 한꺼번에 처리하므로, 각 컴포넌트가 데이터를 가져오는 로직을 중복하지 않고, 페이지 컴포넌트에서 한 번에 관리할 수 있습니다.
3. 일관된 에러 처리:
   • 서버에서 데이터를 한꺼번에 가져오기 때문에, 에러 발생 시 한 곳에서 일관되게 처리할 수 있습니다. 이는 에러 처리 로직의 중복을 줄이고, 유지보수성을 높입니다.
4. 단일 트랜잭션 관리:
   • 모든 데이터 페칭이 한 번의 트랜잭션으로 처리되므로, 데이터 일관성이 높아집니다. 예를 들어, 데이터의 상태가 여러 API 호출 사이에서 변경될 가능성이 줄어듭니다.

단점:

1. 복잡성 증가:
   • 여러 종류의 데이터를 동시에 처리해야 하므로, 서버 액션의 복잡성이 증가할 수 있습니다. 특히, 데이터 간의 의존 관계가 복잡할 경우 이를 관리하는 로직이 복잡해질 수 있습니다.
2. 유연성 저하:
   • 모든 데이터를 한 번에 가져오기 때문에, 특정 데이터만 부분적으로 업데이트하거나, 페칭하고자 할 때 유연성이 떨어집니다. 모든 데이터가 동시에 갱신되기 때문에 불필요한 데이터 페칭이 발생할 수 있습니다.
3. 초기 로딩 시간 증가 가능성:
   • 모든 데이터를 한 번에 가져오므로, 데이터 양이 많을 경우 초기 로딩 시간이 길어질 수 있습니다. 이는 사용자 경험에 영향을 미칠 수 있습니다.

코드 예시:

//actions.ts
export async function getNutrientAllFunctionalities(params: {
  mid: string;
  functionalityId: number | null;
}): Promise<
  ActionResponse<{
    functionalityResponse: z.infer<typeof NutrientFunctionalities.findOneV1.outputRs>;
    functionalityMappingsResponse: z.infer<typeof NutrientFunctionalityMappings.findOneV1.outputRs>[];
    nutrients: z.infer<typeof NutrientMinimalOutput>[];
    existMappingsData: z.infer<typeof NutrientCategoryMappingMinimalOutput>[];
    nonMappingData: z.infer<typeof NutrientCategoryMappingMinimalOutput>[];
    categoryQuestionsResponse: z.infer<typeof NutrientCategoryQuestions.findAllV1.outputRs>[];
  }>
> {
  const session = await getSession();

  try {
    // 기능성 데이터 가져오기
    const functionalityResponse = await NutrientFunctionalitiesRepository.findOneV1({
      ...validatedFields,
      pFunctionalityId: params.functionalityId,
    });

    // 기능성 매핑 데이터 가져오기
    const functionalityMappingsResponse = await NutrientFunctionalityMappingsRepository.findOneV1({
      ...validatedFields,
      pFunctionalityId: params.functionalityId,
    });

    // 하위 성분 데이터 가져오기
    const existMappingsData = await NutrientCategoryMappingsRepository.findOneV1({
      ...validatedFields,
      pFunctionalityId: params.functionalityId,
    });

    // 모든 영양소 데이터 가져오기
    const nutrients = await NutrientsRepository.findAllV2({
      pInvokerOperatorId: session?.user.operator_id,
      pThisOperatorMenuIdentifier: params.mid,
      pCallDate: spCallDate(),
    });

    // 연결되지 않은 영양소 데이터 필터링
    const existMappingIds = existMappingsData.map((item) => item.nutrient_id);
    const nonMappingData = nutrients.filter((item) => !existMappingIds.includes(item.nutrient_id));

    // 문진 질문 데이터 가져오기
    const categoryQuestionsResponse = await NutrientCategoryQuestionsRepository.findAllV1({
      ...validatedFields,
      pFunctionalityId: params.functionalityId,
    });

    return {
      status: 'SUCCESS',
      message: '모든 데이터를 성공적으로 불러왔습니다.',
      data: {
        functionalityResponse: functionalityResponse[0],
        functionalityMappingsResponse,
        nutrients,
        existMappingsData,
        nonMappingData: nonMappingData.map((item) => ({
          ...item,
          recommend_weight: 0,
          recommend_memo: '',
        })),
        categoryQuestionsResponse,
      },
    };
  } catch (error) {
    return errorHandler(error);
  }
}

//page.tsx
export default async function Page({ params: { id }, searchParams: { mid } }: PageProps) {
  const { status, data } = await getNutrientAllFunctionalities({ mid, functionalityId: Number(id) });

  if (status !== 'SUCCESS') {
    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
  }

  return (
    <HeaderLayout title="중분류 카테고리 수정" description="중분류 카테고리를 수정할 수 있습니다." backBtn={<BackButton />}>
      <div className="flex flex-col gap-2">
        <CategoryDetailInfo data={data.functionalityResponse} id={id} />
        <TopCategoryView id={Number(id)} mid={mid} data={data.functionalityMappingsResponse} />
        <SubCategoryIngredients id={Number(id)} mid={mid} data={data} />
        <SubCategoryQuestionTable id={Number(id)} mid={mid} data={data.categoryQuestionsResponse} />
      </div>
    </HeaderLayout>
  );
}

2. 각 컴포넌트에서 개별적으로 호출

이 방법은 각 컴포넌트가 자신에게 필요한 데이터를 독립적으로 페칭하는 경우.

장점:

1. 유연성:
   • 각 컴포넌트가 독립적으로 데이터를 페칭하므로, 필요한 데이터만 가져올 수 있습니다. 이는 특정 컴포넌트에서만 데이터를 업데이트하거나, 별도의 조건에 따라 데이터를 페칭할 수 있게 합니다.