getServersideProps -> 14버전 마이그레이션 이슈

[caias]

import { Metadata } from 'next';

type TServerProps = {
  params: {
    benefitId: string;
  };
  searchParams: {
    userId?: string;
    type?: string;
    shareInfo?: string;
  };
};

const getBenefitData = async (benefitId?: string, userId?: string) => {
  const data = await fetch(
    `apiurl`, // 실제 api로 변경해서 테스트
  );
  return data.json();
};

export async function generateMetadata({
  params,
}: TServerProps): Promise<Metadata> {
  const { benefitId } = params;
  const data = await getBenefitData(benefitId);

  return {
    title: data.title,
    description: '',
    openGraph: {
      type: 'website',
      url: data.shareImage,
      title: data.title,
      description: data.subTitle || '',
      siteName: 'title',
      images: [
        {
          url: data.shareImage,
          width: 1200,
          height: 600,
        },
      ],
    },
  };
}

export async function BenefitPage({ params }: TServerProps) {
  const benefitId = params.benefitId;
  const initialData = await getBenefitData(benefitId);

  return <>{initialData.toString()}</>;
}

export default BenefitPage;

• generateMetaData는 독립적인 함수로 밖에 사용을 못함
• getServersideProps는 page단의 async 함수로 빠지면서 그냥 fetching data를 사용

next13미만 처럼 getServersideProps안에서 meta를 넣을수 없는 상황이기에 이론적으로는 서버사이드 api request를 중복으로 2번 쓸수 밖에 없는 구조.

• next fetch 함수는 같은 endpoint에 대해서 캐싱을 자동적으로 먹는다고 하는데 실질적으로 테스트를 어떻게 해야될지 의문이다.
• 캐싱이 적용 된다고 해도 캐싱 컨트롤을 어떻게 해야 될지도 확인이 필요.
• 콘솔을 찍어보면 2번 찍히긴하는데 캐싱이 어디에 어떻게 먹는지 어떻게 알지??

import { cache } from 'react';
const getBenefitData = cache(async (benefitId?: string, userId?: string) => {
  const data = await fetch(
    `apiurl`, // 실제 api로 변경해서 테스트
  );
  return data.json();
});

• 위와같이 react의 cache를 쓰면 호출을 2번해도 콘솔을 한번 찍힘.

fetch함수를 그냥 쓸지, axios를 쓸지 fetch함수가 useSwr을 대체할수 있을지에 대한 대안도 필요

• fetch함수를 안쓰고 axios같은 애들을 쓴다면 캐싱 옵션을 제공 (https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#fetchcache)

근데 대부분 next migration하면서 fetch vs axios 논쟁이 꽤 많은듯 한데 대세는 fetch함수 쓰고 interceptor를 직접 만들어서 쓰는 추세가 많은거 같다.

branch: issue/getserversideProps-twice dir: ./apps/next-latest

[hanseungyoo]

일단은 제쪽에서는 fetch로 테스트 하긴 했는데, fetch를 사용해도 axios를 사용해도 이슈가 없고, useSWR을 그대로 사용해도 될 듯 합니다. serverSideProps는 없지만, 결국에는 server component에서 데이터 fetching 후 unstable_serialize를 사용하고, useSWR이 사용되는 client component에서는 swr config에 fallback으로 넘겨주는 전략을 취하고 있더라고용

fetch의 경우에는 이건 좀 생각해봐야 할텐데, dao에서 대응할 수 있도록 올려주신 doc의 fetch revalidate option을 추가 시켜줘야 할 것 같슴당

[caias]

저도 fetch 그냥 쓰고 fetch 전용 interceptor를 그냥 만드는게 나은쪽으로 마음이 기울고 있습니다. 캐싱에 대해서 좀더 알아봐야 될거같은데 위에 적은거처럼 generateMetaData에서 api호출 한번, Page단에서 호출 한번, 해당 페이지 기준으로 benefit/layout.tsx에 header가 포함되는게 맞는데 이렇게 되면 layout.tsx에서는 기존 next와 다른게 props를 밑으로 내려주는게 불가하기때문에 여기서 1번 총 3번의 api request가 서버상에서 이루어지네요. 캐싱이 어떻게든 필요한 상황인듯 한데 아직 뭔가정리가 안되고 있습니다.

fetch interceptor는 요 블로그가 좀 인상깊네요. 요 내용을 토대로 아예 입맛에 맞게 새로 만들어도 될거같습니다. https://blog.deercorp.com/next-js-app-router-and-fetch-library/