질문있습니다.

Question

질문1. 안녕하세요 제로초님 swr도 서버사이드 렌더링이 된다고 하셨잖아요?? 그러면 리덕스와 사가를 통해 로드액션으로 서버사이드 렌더링 하는 것과 swr 을 통해 서버사이드 렌더링하는중 어떤게 효율적인가요? 같은 기능을 하는것 같은데 둘의 장점과 단점이 궁금합니다 질문2. Profile.js입니다 const   Profile  = ()  =>  {    const  [ followingsLimit ,  setFollowingsLimit ] =  useState ( 3 );    const  [ followersLimit ,  setFollowersLimit ] =  useState ( 3 );    const  {  data :  followingsData ,  error :  followingError  } =  useSWR ( `http://localhost:3065/user/followings?limit= ${ followingsLimit } ` ,  fetcher );    const  {  data :  followersData ,  error :  followerError  } =  useSWR ( `http://localhost:3065/user/followers?limit= ${ followersLimit } ` ,  fetcher );    const  {  me  } =  useSelector (( state )  =>   state . user ); profile페이지로 이동하게 되면 팔로잉과 팔로워데이터가 나타납니다. 이때 데이터는 useEffect를 사용하지않고 SWR을 사용해서 불러온것인데 SWR은 기본적으로  useEffect와 같이 페이지가 마운트 될 때 알아서 데이터를 불러오는 것인가요? useEffect와 useSWR중 어떤것이 먼저 실행되는 것인가요? 질문3.  profile.js에서 export   const   getServerSideProps  =  wrapper . getServerSideProps ( async  ( context )  =>  {    // console.log('getServerSideProps start');    // console.log(context.req.headers);    const   cookie  =  context . req  ?  context . req . headers . cookie  :  '' ;    axios . defaults . headers . Cookie  =  '' ;    if  ( context . req  &&  cookie ) {      axios . defaults . headers . Cookie  =  cookie ;   }    context . store . dispatch ({      type :   LOAD_MY_INFO_REQUEST ,   });    context . store . dispatch ( END );    // console.log('getServerSideProps end');    await   context . store . sagaTask . toPromise (); }); 여기서 LOAD_MY_INFO_REQUEST액션을 서버사이드 렌더링 하는이유가 궁금합니다. 먼저 index.js에서  LOAD_MY_INFO_REQUEST로 서버사이드렌더링을  이미 했기 때문에 리덕스user에 me에 데이터가 이미 들어있어서 위의 코드가 없어도 데이터를 불러오기는 하더라구요? 그러면 위의 코드가 있는 이유가 궁금합니다.    ❶   리덕스user에 me에 데이터가 이미 들어있기 때문에  Profile.js 에서 위의 코드는 필요가 없는건가요?    ❷ 아니면 index.js에서  LOAD_MY_INFO_REQUEST 액션이 있음에도 불구하고 위의 코드가 있는건 profile은 index.js와 다른 페이지이기 때문에 다시 서버사이드 렌더링으로 액션을 주어야지 페이지가 렌더링될때 데이터를 빨리 받아오게 하기위함인가요? 둘중 어떤게 맞나요?

제로초(조현영) · Answer

로그인을 안 했을 때 profile페이지에서 index로 redirect 시킵니다.

김건희 · Answer

질문1. 감사합니다 그런데 로그인 페이지는 /index.js라고 하셨는데, LoginForm페이지는 AppLayout.js에 속해있지 않나요? 어떻게 로그인페이지가 index.js 인지 궁금합니다.

제로초(조현영) · Answer

1. 로그인을 한 후 프로필 페이지로 이동할 때 접근이 되는 이유는, 로그인 페이지는 /index.js이고 여기서 사용자 데이터를 리듀서에 넣은 것을 profile.js로 가서 useSelector로 받을 수 있기 때문입니다. 2. 위의 코드가 없으면 profile페이지에서 새로고침을 할 때 동작하지 않습니다.

김건희 · Answer

제로초님 제가 착각해서 질문을 잘못 드린 것 같습니다. 다시 설명 드리자면  profile.js의 export   const   getServerSideProps  =  wrapper . getServerSideProps ( async  ( context )  =>  {    // console.log('getServerSideProps start');    // console.log(context.req.headers);    const   cookie  =  context . req  ?  context . req . headers . cookie  :  '' ;    axios . defaults . headers . Cookie  =  '' ;    if  ( context . req  &&  cookie ) {      axios . defaults . headers . Cookie  =  cookie ;   }    context . store . dispatch ({      type :   LOAD_MY_INFO_REQUEST ,   });    context . store . dispatch ( END );    // console.log('getServerSideProps end');    await   context . store . sagaTask . toPromise (); }); 위의 코드를 지우고 나서  로그인을 한 후 프로필 페이지로 이동해도 프로필 페이지로 접근이 가능하고 팔로잉 팔로워 목록도 다 렌더링 되더라구요? 질문1. 이때는 왜 동작하는 것인지 궁금합니다. 위의 코드가 없음에도 불구하고  동작하는 이유가  로그인했을때 LOG_IN_SUCESS 리덕스에  데이터가 남아있어서 그 데이터로 profile.js페이지가 동작하는 것인가요?    질문2. 로그인 후  위의 코드가 없이도 동작은 하지만 위의 코드를 사용하여 서버사이드렌더링을 하여  한번 더 불러오는 것은  프로필 페이지가 렌더링 될때 me의 데이터를 빨리  하기위함인가요??

제로초(조현영) · Answer

1. 제가 강좌에서 말씀드린 swr과 리덕스의 장단점과 똑같습니다. 그 둘이 둘 다 SSR이 되는 것일 뿐이고요. GET에 한해서는 swr이 더 깔끔하다고 개인적으로 느꼈습니다. 2. use는 순서대로 위에서 아래로 실행됩니다. 3.index.js랑 profile.js는 별개의 페이지라 서로 영향을 미치지 않습니다. 2번이긴 한데 빨리 받아오게 하기위함이 아니라 없으면 아예 /profile로 접근할 때 동작하지 않습니다.