Next :: getServerSideProps

next의 data patching 방법으로는 getStaticProps, getServerSideProps 가 있다.

 

- getStaticProps: static data를 위해 data fetching (빌드 후 데이터변경불가. 빌드할 때 미리 HTML로 만들어놓음)

서버에 무리를 덜 주고 HTML이므로 더 빠르게 제공할 수 있지만,

정적 정보를 제공하게되므로 사용하기가 어려움.

 

- getServerSideProps: SSR을 위해 data fetching (빌드와 상관없이 매 요청마다 데이터를 서버에서 가져옴)

동적 정보를 제공해야하는 경우.

대부분의 경우 로그인에 따라 화면이 다르게 나오므로 서버사이드프롭스를 사용.

ex. 프로필페이지 (로그인한 사용자에 따라 다른 페이지를 보여줌)

---

 

next와 함께 redux를 사용하기위해서

next-redux-wrapper 라이브러리를 사용하여

getServerSideProps를 적용해보자.

 

 

컴포넌트 함수 아래쪽에 export const getServerSideProps를 만든다.

이 부분은 화면을 그려주기전에 먼저 서버에서 실행된다.

context 안에 sotre가 들어있다.

getServerSideProps에서 dispatch를 사용하려면,

  context.store.dispatch() 를 사용한다.

 

하지만 dispatch만 적어주면,

요청만하고 응답을 받기전 실행이 되므로,

응답받을때까지 기다려주는게 필요하다.

 

그때 사용할 명령어가 이 두가지.

  context.store.dispatch(END);  

  await context.store.sagaTask.toPromise();  

sagaTask는 redux-saga를 설정하기위해 store에서 미리 설정해놨었다.

 

 

---

 

 

콤바인리듀서확장하기

 

콤바인 리듀서 확장 방법을 살펴보자.

흔히 사용하는 콤바인 리듀서 사용방법이다.

콤바인리듀서를 확장하기 위해서는 위와 똑같은 결과이지만 다음과 같이 작성해야한다.

const rootReducer = combineReducers({user,post}) 와 동일한 결과

 

 

여기에 확장하고싶은 코드를 case를 사용해 넣어주면된다.

 

next-redux-wrapper의 HYDRATE 기능을 넣어주자.

 

action HYDRATE 안에 serverSideProps 에서 dispatch 한 data가 들어가있다.

 

 

 

---

하지만 이렇게 하면 로그인 후 새로고침 했을때 로그인 유지가 안된다.

 

이전에 브라우저에서 서버로 요청을 보낼때

credentials이랑 CORS 문제가 발생했었다.

이유는 프론트서버랑 백엔드서버가 도메인이 다르기 때문.

그래서 쿠키전달이 안됨(credentials true 해줘야한다.)

 

브라우저에서 보낼땐, 브라우저가 쿠키를 직접 담아주므로 따로 headers 설정을 할 필요가 없었지만,

SSR는 프론트서버에서 백엔드서버로 요청을 보내는 것이므로 브라우저의 개입이 없다.

그래서 쿠키는 axios에서 직접 넣어서 보내주어야한다.

 

if문을 따로 설정하지 않으면 로그인이 공유되는 문제가 생긴다.

쿠키 설정을 서버에서 하기때문에,

로그인 후 다른사람이 이 페이지를 방문했을때 내 정보로 로그인이 되어있다.

 

그러므로 요청에 쿠키가 없을 땐 백엔드서버에 쿠키를 초기화하고,

요청에 쿠키가 있을때에만 백엔드서버에서 쿠키 값을 넣어준다.

 

(프론트서버에서 쿠키(세션쿠키로설정)는 브라우저 종료 혹은 새로운 쿠키를 받기 전까지 유지됨)

 

 

 

참고
- 제로초 노드버드 강의
- https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/getstaticprops%EC%99%80-getserversideprops-in-next-js-ab076c253d2c
-https://nextjs.org/docs/basic-features/data-fetching