next-redux-wrapper의 getServerSideProps

서버사이드 렌더링을 공부하면서 getServerSideProps를 알게 되었다.

쉽게 이야기하면 페이지가 처음 로드될 때 getServerSideProps의 함수를 사용하면 반환된 데이터를 사용하여 페이지를 미리 렌더링 할 수 있게 된다.

이외에도 getStaticPaths, getStaticProps 함수가 존재해 모두 서버사이드 렌더링을 도와준다. 위 함수들은 Next.js에서 기본적으로 제공하기 때문에 추가적인 라이브러리 없이 사용이 가능하다.

하지만 나는 next-redux-wrapper의 라이브러리를 사용하고 있기 때문에 Next.js에서 제공하는 getServeSideProps와 next-redux-wrapper를 섞어 쓰는 것은 추천하지 않는다고 한다.

중요한 것은 나는 next-redux-wrapper을 7버전으로 공부하고 있어 6버전과의 문법적으로 변화가 있어 공부한 것을 적어보고자 한다.

// 6버전
getServerSideProps({store,req,res} => {...}) 
​
// 7버전
getServerSideProps((store)=>({req,res})=>{...})

6버전에서는 우리가 자주 쓰던 함수 형식으로 이루어져 있지만 7버전으로 넘어오면서 고차함수 형식으로 바뀌게 되었다.

그럼 바뀐점을 생각하면서 코드를 작성하였다.

const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({req,res}) => {
      const parmas = req.parmas.id // undefined
      const query = req.query.id // undefined
      store.dispatch({
        type:"...",
        data:"..."
      })
    }
)

먼저 나는 getServerSideProps의 store에 내장되있는 dispatch를 사용하였다. 그리고 주소의 params 혹은 query의 값을 data로 넘겨주고자 하였다.

그래서 params 혹은 query에 접근하기 위해 당연히 req.params에 접근하여 갖고오려고 하였지만 존재하지 않았다. 그래서 next-redux-wrapper의 공식문서를 읽어보았지만 해당 내용을 찾지 못해 Next.js의 공식문서를 읽어보았다.

// Next.js에서 제공하는 getServerSideProps
function getServerSideProps(context){
  const query = context.query.id; // value
  const parmas = context.params.id; // value
  return {
    props:{},
  }
}

공식문서에는 context에는 req,res를 포함하여 query,params를 따로 제공해주고 있었다. 나는 router를 생성할 때 req 내부에 있었으니 당연히 내부만 찾고있었다.

그래서 나는 아래처럼 코드를 수정해주고 출력을 해보니 정상적으로 값을 받아오기 시작했다.

const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({req,res,params,query}) => {
      const parmas = parmas.id //  value
      const query = query.id // value
      store.dispatch({
        type:"...",
        data:"..."
      })
    }
)