[Refactor] Server Components 적극 활용하기

Data Fetching

데이터 가져오기 : 서버 구성 요소를 사용하면 데이터 가져오기를 데이터 소스에 더 가까운 서버로 이동할 수 있습니다. 이를 통해 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 수행해야 하는 요청 수를 줄여 성능을 향상할 수 있습니다.
캐싱 : 서버에서 렌더링하면 결과를 캐시하고 후속 요청 및 사용자 전체에서 재사용할 수 있습니다. 이렇게 하면 각 요청에 대해 수행되는 렌더링 및 데이터 가져오기 양이 줄어들어 성능이 향상되고 비용이 절감될 수 있습니다.

일단 server component 에서 data를 fetch 해올 수 있다는 것을 생각하지 못하고 있었다. open-graph 를 적용하면서 이점을 활용하지 않았다는 것을 깨달았다. 서버컴포넌트에서 Data Fetching을 하도록 수정한다면, 자연스레 Caching 도 적용될까(?) 리펙토링을 진행해보자.

페이지 정보에 대한 GET은 page.js 에서 하도록 수정하자.
1. ex) 페이지 정보 == 컬렉션 페이지의 컬렉션 정보, 컬렉션이 가지고 있는 핀 정보, 댓글 정보

다른 페이지에 비해서 퍼포먼스 점수가 제일 낮은 ‘컬렉션 조회 페이지’ 부터 적용시켜보았다.

기존 코드

// Server Component
// /app/(default)/collection/[id]/page.tsx
export default function Page({ params }: PageParams) {
  return <CollectionPage collectionId={params.id} />;
}

// Client Component
// /src/containers/collection/CollectionPage.tsx
export default function CollectionPage({
  collectionId,
}: {
  collectionId: number;
}) 
    ...
  useEffect(() => {
    getCollectionData();
    getPinData();
    getReplyData();
  }, []);
  ...
};

변경 후 코드

// Server Component
// /app/(default)/collection/[id]/page.tsx
export default async function Page({ params }: PageParams) {
    // 컬렉션 조회 페이지에서 필요한 데이터를 서버컴포넌트에서 가져온다.
  const collectionId = params.id;
  const { collectionInfo, errorMessage: collectionInfoErrMsg } =
    await fetchGetCollectionInfo(collectionId);
  const { pinList, errorMessage: pinListErrMsg } =
    await fetchGetCollectionAllPins(collectionId);

  return collectionInfo && pinList && collectionInfoErrMsg === "" ? (
    <CollectionPage
      collectionId={collectionId}
      collectionInfo={collectionInfo}
      pinList={pinList}
      pinListErrMsg={pinListErrMsg}
    />
  ) : (
    <CollectionNotFoundPage collectionInfoErrMsg={collectionInfoErrMsg} />
  );
}

// Client Component
// /src/containers/collection/CollectionPage.tsx
export function CollectionPage({
  collectionId,
  collectionInfo,
  pinList,
  pinListErrMsg,
}: {
  collectionId: number;
  collectionInfo: CollectionDetail;
  pinList: PinForPlace[];
  pinListErrMsg: string;
}) {
    ...
};

서버 컴포넌트에서 데이터를 가져오면서, Next.js app router의 기능 ‘Loading UI’ 또한 자연스럽게 적용할 수 있었다.

Loading UI 란 .. UI 로딩 및 스트리밍 loading.js 특수 파일은 React Suspense를 사용하여 의미 있는 로딩 UI를 만드는 데 도움이 됩니다.. 이 규칙을 사용하면 경로 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로드 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다.

‘컬렉션 조회 페이지’에는 댓글을 달 수 있는 기능이 있다. 처음에는 댓글 내역도 서버컴포넌트인 Page 에서 가져오려고 하였다. 하지만 댓글의 경우에는 잦은 업데이트가 필요하다고 판단하여 CollectionReplyInput컴포넌트 자체에서 데이터를 가져오고 관리하도록 수정하였다.

(컬렉션 조회 페이지안의 메뉴 각각을 page로 만들어 버리는 것도 좋겠다는 생각이 들었다. 컴포넌트의 의존성도 약해지고 좋지 않을까?)