인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

Jun Mr.님의 프로필 이미지
Jun Mr.

작성한 질문수

React로 NodeBird SNS 만들기

6-3. getInitialProps로 서버 데이터 받기

재질문 드립니다 !!

작성

·

126

0

제가 설명이 조금 부족했나봅니다.

부과적인 설명을 드리자면,

로그인 이후, 회원가입 페이지를 들어간다면,

강좌에서는 useEffect 를 사용하여, me 의 정보가 있다면

Router.Push 를 하여 메인페이지로 이동을 시켜주는데,

사실, useEffect 라는 사이클은  render 이후에 발생되는 사이클이라 매끄럽지가 않아보입니다. (node bird 프로젝트에서는 배경이 흰색이지만, 다른 색 배경일 경우에는 더 사용자 경험 측면에서 엄청 매끄럽지 않을 것 같더군요..)

그래서 getInitialProps 단에서 미리 체크 하여, fron server 단에서 push 를 해준다면 훨씬 매끄러울것 같아 제 스스로 응용하고자 찾아보고 응용하고자 했던 것입니다.

getInitialProps  에서는 

const { res } = context;
if (res) {
      res.writeHead(302, {
        Location: '/'
      })
      res.end();
    } else {
      Router.push('/')
   };

이런식으로 처리가 가능하더군요. (router 사용시.)

그런데 문제가 바로, 

me의 존재여부(로그인여부)를 판단하고자하는

const state = context.store.getState();

state.user.me 의 데이터가 없다는 것이 문제여서 질문을 드렸었습니다. (참고로 8강까지 전부 강의 꼼꼼히 다 들었습니다 ㅎ.ㅎ)

ssr 을 통해, server 단에서 dispatch 하여 미리 데이터는 받아오지만,  순서가 아래와 같은 것 같더군요. (질문 이외 상세한 사이클은 생략)

client > signup 페이지 요청 -> _app -> getInitialProps -> 디스패치(유저정보가져오기) 요청[request] -> signup ->

geInitialProps -> 디스패치(유저정보가져오기) 성공[success] -> signup page render

이런 순으로 가져오는 것 같아, 

signup.js 의 getInitialProps 단에서 render 이전에 처리할수 있는 방법이 있을까 하고 질문을 드렸습니다.

항상 감사합니다.

새해복 많이 받으세요.

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

store의 user.me가 있는지 여부 체크는 라이프사이클 맞추기가 힘들어서 힘들 것 같고요.

https://github.com/bgold0/nextjs-auth-skeleton/blob/master/pages/_app.js

next-cookies 사용해서 로그인용 쿠키 존재 유무를 통해 이런 식으로 가능할 것 같습니다. 쿠키가 로그인을 위한 토큰 역할을 한다고 보시면 될 것 같습니다.

Jun Mr.님의 프로필 이미지
Jun Mr.

작성한 질문수

질문하기