[Project/Nextjs] getServerSideProps

FOR

• 처음에 react 로 시작한 프로젝트 였지만 SEO 대응 등의 이유로 제품 상세 페이지와 같은 페이지에서 SSR을 구현하기 위해 Nextjs 로 migration 을 진행 했다.

-제품 상세페이지에서 제품 데이터를 가져오기 위해 다음과 같은 코드를 작성 했다.

export async function getServerSideProps(context) {
  const device = context.req.cookies.device;
  const goodsId = context.query.id;
  let header = context.req.headers;
  const data = await fetch(
    `${API.goodsDetail}${goodsId}&device_kind=${device}&app_version=${API.app_version}`,
    {
      method: "GET",
      headers: {
        "Content-type": "application/json",
        "Access-Control-Allow-Credentials": true,
      },
    }
  );
  const goods = await data.json();

  return {
    props: {
      goods,
      header,
      goodsId,
    },
  };
}

• device 정보를 저장해 놓은 쿠키를 가져오기 위해 context.req.cookies 에 접근 했고, 상품 아이디를 가져오기 위해 query 로 부터 context.query 에 접근 했다.

• 특이한 점은 document.cookie 로 여러 쿠키를 저장 하면 쿠키가 하나의 string 덩어리 이기 때문에 string 을 manipulate 하는 여러 method 등을 사용하여 쿠키를 가져왔으나 getServerSideProps 안에서는 context.req.cookies.device 를 통해 "device" 라는 이름으로 저장된 쿠키를 간단하게 가져 올 수 있다는 점이 신기했다.

• context.req.headers 부분은 제품 데이터 fetch 와는 상관이 없지만 이후에 AWS의 KinesisClient 를 통한 로그 데이터 수집을 위해 referer 가 필요해서 추가가 되었다. context.req.headers.referer 을 통해 이전 페이지에 대한 주소를 가져올 수 있다. 링크를 타고 들어가거나 복사된 url 을 가지고 첫 화면에서 들어가는 경우에는 아예 referer 이라는 키값이 존재 하지 않는다.