20210322- NextJS SSG 도입

20210322

최근 NextJS에 대해 제대로 공부하고 있다.
그저 단순히 사용하는것이 아니라 왜 SSR, SSG를 이용하는지, 어떻게 해야 효율적으로 이용할 수 있는지 등등..

오늘 처음으로 회사 프로젝트 상세페이지에 SSG를 적용시켜 보았다.

export const getStaticPaths = async () => {
  return {
    paths: [{ params: { id: '16' } }],
    fallback: true,
  };
};

build시 /event/16 HTML파일과 JSON파일이 잘 생성되고, 동적 라우팅에서 params로 설정해 주지 않아도 최초 request시 HTML, JSON이 잘생기는것 또한 확인하였다. SSG의 엄청난 스피드에 감탄하며 아직 미흡한 부분을 확인하고 있다.

가장 큰 이슈는 기존에 _app.tsx getInitialProps에서 SSR으로 로그인을 진행하였는데, SSG 페이지에서는 SSR이 실행되지 않는다는 것이다.

흠.. 그래서 SSG페이지에서 새로고침시에 로그인이 풀려버린다.
client side에서 로그인 시켜주는 방법으로 해결을 하였지만, express-session에서 http-only로 인해 client-side에서 access_token을 가져오지 못하여, 불필요한 api 호출이 생기게 되었다.(access_token이 있을때만 로그인 api를 호출하고 싶음... 있는지만 체크하고 싶은데 해결 방법 아시는 분?)

관련 문서들을 좀 더 찾아보고 가장 효율적인 방법으로 도입해야겠다.