[Refactor] memberInfo RQ에서 SSG fetching으로 수정

[eonseok-jeon]

죄송합니다 실수로 주용이 PR을 잘못 머지해서 다시 복구시켰어요ㅜ 기존 pr

Summary

close #415

Comment

일단 기존에 useGetMember 쿼리 커스텀 훅으로 members 데이터를 받아왔었습니다.

const { data } = useGetMember();

const cardContent = useMemo(() => {
    if (!isLoading)
      return (data ? data.members : emptyMembers(6)).map(
        ({
          id,
          name,
          position,
          description,
          currentProject,
          imageSrc,
          gmail,
          linkedin,
          github,
        }) => (
          <MemberCard
            key={id}
            name={name}
            position={position}
            description={description}
            currentProject={currentProject}
            imageSrc={imageSrc}
            gmail={gmail}
            linkedin={linkedin}
            github={github}
          />
        ),
      );

    return (
      <St.OvalSpinnerWrapper>
        <OvalSpinner />
      </St.OvalSpinnerWrapper>
    );
  }, [data, isLoading]);

사실 서버 컴포넌트의 이점을 살릴 수 있는 NextJS에서 useQuery를 통해 클라이언트 사이드 렌더링을 하는 것보다 기존의 aboutInfo를 getStaticProps를 통해 prefetch 하였던 것처럼 memberInfo 데이터 또한 사전에 생성하여 props로 건내주는 방식으로 리팩토링하였습니다.

import { Suspense } from 'react';
import Flex from '@src/components/common/Flex';
import OvalSpinner from '@src/components/common/OvalSpinner';
import { MemberType } from '@src/lib/types/about';
import MemberCard from '@src/views/AboutPage/components/Member/Card';
import SectionTop from '../../@common/SectionTop';
import * as St from './style';

type MemberSectionProps = {
  generation: number;
  members: MemberType[];
};

const MemberSection = ({ generation, members }: MemberSectionProps) => {
  return (
    <Flex
      dir="column"
      gap={{ mobile: 24, tablet: 48, desktop: 60 }}
      style={{ position: 'relative' }}
    >
      <St.MarginTop />
      <SectionTop
        engTitle="Executives"
        korTitle={`${generation}기 임원진`}
        description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요."
      />
      {/* TODO : 서버에서 description을 받아오도록 수정 */}
      <Flex
        dir="column"
        gap={{ mobile: 18, tablet: 24, desktop: 48 }}
        style={{ alignItems: 'center' }}
      >
        <Suspense
          fallback={
            <St.OvalSpinnerWrapper>
              <OvalSpinner />
            </St.OvalSpinnerWrapper>
          }
        >
          {/* {errorContent} */}
          <St.CardContainer>
            {members.map(
              ({
                id,
                name,
                position,
                description,
                currentProject,
                imageSrc,
                gmail,
                linkedin,
                github,
              }) => (
                <MemberCard
                  key={id}
                  name={name}
                  position={position}
                  description={description}
                  currentProject={currentProject}
                  imageSrc={imageSrc}
                  gmail={gmail}
                  linkedin={linkedin}
                  github={github}
                />
              ),
            )}
          </St.CardContainer>
        </Suspense>
      </Flex>
    </Flex>
  );
};

export default MemberSection;

기존에 사용하던 MemberContent 컴포넌트를 그대로 사용할 수 있었지만, 불필요하게 props를 전달하는 것 같아서 Section 컴포넌트에서 렌더링하도록 하였습니다.

또한 Suspense로 감싸주어 서버에서 미리 청크를 분리하고 데이터가 준비되는대로 클라이언트로 전송할 수 있도록 구현하였습니다.

아직은 MemberContent 컴포넌트를 삭제하지는 않았는데, 현재 변경사항이 반영된다면 어느곳에서도 사용하지 않으니 삭제하도록 하겠습니다.

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[eonseok-jeon]

@wuzoo

실수로 제가 pr을 머지해버려서 다시 열었어요 ㅜㅜ 죄송합니다 😓

코드 수정한 거 너무 좋은 거 같아요!! 고생하셨습니다 :)

[eonseok-jeon]

getStaticProps는 빌드 타임에 데이터를 가져오고, 페이지를 정적으로 생성하는데 이 과정은 서버 측에서 이루어지기 때문에 클라 쪽에서 Suspense를 사용할 필요는 없어보여용~
suspense는 클라에서 비동기로 데이터 받아올 때 사용하는 거니까요~~

[wuzoo]

해당 컴포넌트는 서버 컴포넌트이기 때문에 React의 Suspense + lazy의 폴백을 위한 용도가 아니라 Streaming을 이용하기 위해 사용하였습니다 !

실제로 서버 컴포넌트에서 Suspense를 사용한다면, 서버는 Suspense로 감싼 컴포넌트에 해당하는 부분을 청크로 분리하여 따로 HTML을 점진적으로 렌더링하여 클라이언트에 보내주는 것으로 알고 있습니다 !

[lydiacho]

덕분에 지식 하나 얻어갑니다!! 서버컴포넌트와 Suspense를 함께 사용할 수도 있군용
링크 걸어주신 공식문서도 잘 읽어보았어요!!
그런데 아직 제가 넥제에 빠삭하지 못해서 잘 이해하지 못한 걸 수도 있는데🥵

• SSR : 클라가 요청을 하면 서버가 데이터를 받아옴 👉🏻👉🏻 데이터 로드되는 동안 suspense fallback 👉🏻👉🏻 로드된 데이터 갈아끼워서 완성된 html을 클라에게 보냄
• SSG : ( 빌드타임에 모든 데이터를 받아서 html을 완성시킴 ) 👉🏻👉🏻 클라가 요청을 하면 서버가 빌드타임 때 이미 완성해둔 html을 클라에게 보냄

작동방식을 이렇게 이해하고 있어요.

주용님께서 링크해주신 문서에서 다루는 서버컴포넌트 + suspense는 SSG가 아닌 SSR 방식 중 서버에서 데이터가 로드되는 동안 suspense 처리가 가능하게 되는 케이스 아닌가요 ??

그런데 현재 주용님께서 suspense로 묶어주신 부분은 members 데이터를 뿌려주는 컴포넌트 렌더링부이고, memebers는 getstaticProps로 가져온 데이터라서, 클라가 해당 페이지를 요청한 후 서버가 데이터를 로드시키는게 아니라 이미 빌드타임 때 로드된 멤버카드들을 바로 보여주는 방식이라고 이해하고 있어요 ! ! !
따라서 이런 케이스일 땐 '클라가 요청 후 서버에서 데이터를 로드하는 동안' 의 간극이 발생하지 않으니 Suspense에도 걸리는게 없는거 아닌가유 ??

말씀하신 Streaming 효과도 이해했는데, 이 친구도 역시 '클라가 요청 후 서버에서 데이터를 로드해서 클라에게 뿌려줄 때, 한꺼번에 받아오도록 기다리지 않고 작은 단위의 청크로 분해하여 바로바로 뿌려줌으로써 유저가 더 빠르게 콘텐츠를 접할 수 있음' 이런 개념인터라, SSG에는 적용되지 않는 부분이라고... 생각합니다 !! (틀렸다면 말씀해주세요 !!)

[wuzoo]

오.. 인정합니다 ! 승희님만큼 넥제 공식문서를 꼼꼼히 읽어보지 못한 제 착각이였네요!

SSG 말 그대로 Static Site Generation이므로 빌드 프로세스에서부터 사전에 페이지를 정적 생성하고 데이터를 받아오므로 Suspense를 사용할 일이 없겠네요 !

승희님 덕분에 넥제 공식문서를 더욱 꼼꼼히 읽어보았는데, 말 그대로 SSG는 서버에서 데이터를 모두 받아온 상태에서 빌드가 진행되기 때문에 데이터를 받아오는 동안의 처리를 담당하는 Suspense는 적합하지 않을 것 같아요 !

덕분에 조금 더 SSR과 SSG의 차이에 대해 배워갑니다 ~ 감사합니다 ㅎㅎ

[wuzoo]

Suspense 제외하여 다시 반영하겠습니다 !

[lydiacho]

@wuzoo
너무 좋은 리팩토링이라고 생각합니당
사실 3기분들도 4기(저희) 인수인계 문서에
RQ보다 SSG를 최대한 활용하면 좋겠다~ 라고 말씀해주셨는데 당시 넥제에 대한 이해도가 많이 부족했기도 했고, 어쩌다보니 공홈을 리팩할 시간이 없어서 반영을 못했었거든요 💦

좋은 작업 감사합니다 ! !
제가 남긴 코멘트 한번 확인부탁드려요!

아 그리구 prefix는 Feat 말고 Refactor로 해도 될 것 같네요!!

[lydiacho]

수고하셨습니당 🎉🎉

[eonseok-jeon]

@wuzoo

고생하셨습니다 :)
사용 안 되는 Member Content component도 머지 전에 지워주세요~