EffectShop 에서getStaticProps, getServerSideProp 적용하기

프로젝트가 어느정도 완성이되가서 이제 next.js 의 강점을 적용해볼 시간이 된듯 하다.
각 페이지의 용도에따라서 getStaticProps 를 사용할껀지 아니면 getServerSideProps를 사용할껀지 정하고 구현을 했습니다.

1. redux를 next.js 에서 사용하기 위한 초기 설정

store/configureStore.js
store 기본 설정 파일에서 의 초기 셋팅

redux를 next.js 서버에서 사용하게끔 할려면

import { createWrapper } from "next-redux-wrapper";

createWrapper 를 사용해서 기본 configeStore 설정을 감싸고 export 해줘야합니다.

const wrapper = createWrapper(configureStore,{
    debug: process.env.NODE_ENV === 'development',
})

export default wrapper;

전체 코드:

import { createWrapper } from "next-redux-wrapper";
import { applyMiddleware, compose, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "@redux-saga/core";
import rootSaga from "../sagas";
import reducer from '../reducers'

const configureStore = () =>{
    const sagaMiddleware = createSagaMiddleware();
    const middlewares = [sagaMiddleware];

    const enhancer = process.env.NODE_ENV === 'production' ?
        compose(applyMiddleware(...middlewares)):
        composeWithDevTools(applyMiddleware(...middlewares));
    
    const store = createStore(reducer,enhancer);
    store.sagaTask = sagaMiddleware.run(rootSaga);
    return store;
}


const wrapper = createWrapper(configureStore,{
    debug: process.env.NODE_ENV === 'development',
})

export default wrapper;

2. Home 페이지 gerServerSideProps 적용하기

wrapper import 해줘서 밑에처럼 사용해야 redux를 같이 쓸수있다.
Home을 SSR 하는 이유는

• Effect들을 페이지와 한꺼번에 깔끔하게 그려줘서 받아오고 싶기 때문에
• 로그인이 된 상태면 서버에서 미리 로그인상태인걸 확인하고 로그인 상태인 페이지를 그려줘서 화면에 보일 수 있게끔 하기위해서( 초기에는 로그인이 아닌 상태로 클라이언트에 불러와서 LOAD_MY_INFO_REQUEST 요청을 보내 로그인 상태면 다시 로그인 상태로 바꿔주는 뭔가 이질적인 느낌을 느꼇다)

import {LOAD_EFFECTS_REQUEST,FIRST_LOAD_EFFECTS_REQUEST } from '../reducers/effect'
import {LOAD_MY_INFO_REQUEST} from '../reducers/user'
import { useDispatch,useSelector} from 'react-redux'
import wrapper from '../store/configureStore'
import axios from 'axios'
import {END} from 'redux-saga';
function Home() {
...
}

export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => {
const cookie = req ? req.headers.cookie : '';
/*만약에 이미 로그인이 된상태면 req에 정보들이 있을것이다 
거기서 req.headers.cookie 값을 cookie에 할당해준다.
*/ 
  axios.defaults.headers.Cookie = '';
//그전에 로그인 한 사람의 쿠기를 지우기 위한 과정.

  if (req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
/*쿠키와 유저정보(req) 다 정보가 있다면 요청을 보낼때 header에 cookie 
값을 넣어서 서버로 보내준다. 그러면 서버에서 로그인 
유무를 확인하고 유저정보를 반환해준다.*/
  store.dispatch(END);
  await store.sagaTask.toPromise();
  //dispatch 가 끝날때 까지 기달려주는 작업코드 (그냥 이렇게 하라고 나와있다 ㅎㅎ..)

3. 로그인페이지, 회원가입페이지

로그인페이지와 회원가입페이지는 동적으로 불러오는 데이터가 없기때문에 따로 선언을 안해줘도 알아서 빌드시점에서 SSG(Static Site Generation) 정적파일로 만들어준다.

4. 다이나믹 라우터 페이지 getStaticProps 적용.

getStaticProps는 정말 안바뀌는 정적페이지를 빌드시점에 아예 html 로 만들어서 웹에서 요청을 하면 html파일만 보내주면 되게끔 해주는 기능이다 html만 보내주면 되기때문에 굉장히 빠른속도를 자랑한다.
각 effect detail 페이지를 보시면 이펙트 효과와 html코드css코드만 존재하기 때문에 getStaticProps를 사용하기 딱 적합하다고 생각한다.
getStaticProps와 getStaticPaths 같이 써서 구현을 한다.

const Detail= () => {
  ...
}
  
export async function getStaticPaths() {
  return {
    paths:[],
  	/*미리 빌드시점에서 생성하고 싶은 애들을 paths에 집어넣어서 빌드할때 
    미리 html에 생성이 가능하다.
    */
    fallback: true,
    /*fallback 을 true로 하면 paths에 없는 애들이 로드되면 
    getStaticProps 사용해서 새로운 html 파일을 만들어준다.
    모든 detail들을 처음에 생성하는건 무리가 있기때문에 유동적으로 
    생성하는게 쫌더 효율적이다.
    */
  };
}

export const getStaticProps =wrapper.getStaticProps((store) => async ({ params }) => {
  store.dispatch({
    type: LOAD_EFFECT_DETAIL_REQUEST,
    data: params.id
  });
  store.dispatch(END);
  await store.sagaTask.toPromise();
});
  //SSG 만들어주는 코드.