인프런 커뮤니티 질문&답변

호머

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

next.js에서 swr 서버사이드 렌더링 질문드립니다.

해결된 질문

작성

485

next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가 서버사이드 렌더링에 대해 궁금한 게 생겼습니다.

사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로 페이지가 보여지도록 하고 싶은데요.

강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면 사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다.

swr을 적용해서 동일하게 구현해보려고 하는데요.

swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다.

혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요?

제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요?

pages/index.tsx

export const getServerSideProps: GetServerSideProps = async function({ req }) {
const cookie: string = req ? req.headers.cookie : '';
if (cookie) {
const data = await fetcher.get('/user', { cookie });

if (data) {
return {
props: { userProps: data },
};
}
}
return {
props: { userProps: null },
};
};

function Index({ userProps }: InferGetServerSidePropsType<typeof getServerSideProps>) {
const { data: user } = useSWR<IUser>('/user', fetcher.get, { initialData: userProps });

return <AppLayout>{user ? user.nickname : '로그인해주세요'}</AppLayout>;
}

components/AppLayout.tsx

function AppLayout() {
const { data: user } = useSWR<IUser>('/user', fetcher.get);

return (
<div css={userNavStyle}>
{user ? (
<>
<Profile image={user.profile} size='40px' />
</>
) : (
<Link href='/login'>
<a href='' className='login'>
로그인
</a>
</Link>
)}
</div>
);
}