Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Sep 7, 2024
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cfd41f2
feat: getStaticProps에 getMemberInfo data fetching 추가
wuzoo Sep 6, 2024
637e8c0
feat: Section 컴포넌트에서 members data render (Content 컴포넌트 미사용)
wuzoo Sep 6, 2024
9cb9a8b
feat: lazy -> Server component dynamic import
wuzoo Sep 6, 2024
afbeded
feat: sizes prop 추가
wuzoo Sep 6, 2024
5bab28e
refactor: ssg suspense 제거
wuzoo Sep 7, 2024
36665c2
chore: Content 폴더 삭제
wuzoo Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { InferGetServerSidePropsType } from 'next';
import { lazy } from 'react';
import dynamic from 'next/dynamic';
import PageLayout from '@src/components/common/PageLayout';
import { api } from '@src/lib/api';
import {
Expand All @@ -10,9 +10,12 @@ import {
RecordSection,
} from '@src/views/AboutPage/components';

const MemberSection = lazy(() => import('@src/views/AboutPage/components/Member/Section'));
const MemberSection = dynamic(() => import('@src/views/AboutPage/components/Member/Section'));

const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticProps>) => {
const AboutPage = ({
aboutInfo,
memberInfo,
}: InferGetServerSidePropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<Root>
Expand All @@ -22,7 +25,7 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr
coreValues={aboutInfo.aboutInfo.coreValue.eachValues}
/>
<CurriculumSection curriculums={aboutInfo.aboutInfo.curriculums} />
<MemberSection generation={aboutInfo.aboutInfo.generation} />
<MemberSection members={memberInfo.members} generation={aboutInfo.aboutInfo.generation} />
<RecordSection
generation={aboutInfo.aboutInfo.generation}
records={aboutInfo.aboutInfo.records}
Expand All @@ -34,10 +37,12 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr

export const getStaticProps = async () => {
const aboutInfo = await api.aboutAPI.getAboutInfo();
const memberInfo = await api.aboutAPI.getMemberInfo();

return {
props: {
aboutInfo,
memberInfo,
},
};
};
Expand Down
7 changes: 6 additions & 1 deletion src/views/AboutPage/components/Member/Card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,12 @@ const MemberCard = ({
return (
<St.Card>
<St.ImageWrapper>
<St.ProfileImage src={imageSrc || NullImage.src} alt={`${name}의 프로필`} fill />
<St.ProfileImage
src={imageSrc || NullImage.src}
alt={`${name}의 프로필`}
fill
sizes="100%"
/>
</St.ImageWrapper>
<St.NameWrapper>
<St.Position>{position}</St.Position>
Expand Down
99 changes: 61 additions & 38 deletions src/views/AboutPage/components/Member/Content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,49 @@
import { useMemo } from 'react';
import Flex from '@src/components/common/Flex';
import OvalSpinner from '@src/components/common/OvalSpinner';
import { emptyMembers } from '@src/views/AboutPage/constant/emptyMembers';
import useGetMember from '@src/views/AboutPage/hooks/queries/useGetMemeber';
import MemberCard from '../Card';
import * as St from './style';

const MemberContent = () => {
const { data, isLoading } = useGetMember();
const { data } = useGetMember();

//불필요해진 DataErrorBanner 컴포넌트 삭제
//useQuery로 마이그레이션 하면 state에 따른 조건부 렌더링 코드가 모두 바뀔 것으로 예상되어 관련 코드는 일단 주석처리했습니다
//const errorContent = state._TAG === 'ERROR' && <DataErrorBanner />;

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}
/>
),
);
// 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]);
// return (
// <St.OvalSpinnerWrapper>
// <OvalSpinner />
// </St.OvalSpinnerWrapper>
// );
// }, [data, isLoading]);

return (
<Flex
Expand All @@ -55,7 +52,33 @@ const MemberContent = () => {
style={{ alignItems: 'center' }}
>
{/* {errorContent} */}
<St.CardContainer>{cardContent}</St.CardContainer>
<St.CardContainer>
{data?.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>
</Flex>
);
};
Expand Down
51 changes: 48 additions & 3 deletions src/views/AboutPage/components/Member/Section/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
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 MemberContent from '../Content';
import * as St from './style';

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

const MemberSection = ({ generation }: MemberSectionProps) => {
const MemberSection = ({ generation, members }: MemberSectionProps) => {
return (
<Flex
dir="column"
Expand All @@ -21,7 +25,48 @@ const MemberSection = ({ generation }: MemberSectionProps) => {
description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요."
/>
{/* TODO : 서버에서 description을 받아오도록 수정 */}
<MemberContent />
<Flex
dir="column"
gap={{ mobile: 18, tablet: 24, desktop: 48 }}
style={{ alignItems: 'center' }}
>
<Suspense
fallback={
<St.OvalSpinnerWrapper>
<OvalSpinner />
</St.OvalSpinnerWrapper>
}
>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

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

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

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

{/* {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>
);
};
Expand Down
40 changes: 40 additions & 0 deletions src/views/AboutPage/components/Member/Section/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,43 @@ export const MarginTop = styled.div`
height: 120px;
}
`;

export const CardContainer = styled.div`
display: grid;

grid-template-columns: repeat(3, 1fr);
gap: 34px;
width: 1200px;

@media (max-width: 80rem) and (min-width: 73.125rem) {
width: calc(100% - 40px);
}

@media (max-width: 73.125rem) and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr);
width: 752px;
}

@media (max-width: 48rem) and (min-width: 36.5rem) {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
width: 576px;
}
/* 모바일 뷰 */
@media (max-width: 36.5rem) {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
width: max(350px, 100% - 40px);
}
`;

export const OvalSpinnerWrapper = styled.div`
width: 100%;
height: 100vh;

padding-top: 200px;

display: flex;
flex-direction: column;
align-items: center;
`;
Loading