결론은 Cypress 전용 NextJS 서버를 하나 더 만들어주고 nock 라이브러리를 통해 api를 mock data로 바꿔주면 된다.

cypress/plugins/index.js 에 다음과 같이 작성해주자.

const nock = require('nock');
const next = require('next');
const express = require('express');

const CYPRESS_SERVER_PORT = 3000;

// start the Next.js server when Cypress starts
module.exports = async (on, config) => {
  const app = next({ dev: true });
  const handle = app.getRequestHandler();

  app
    .prepare()
    .then(() => {
      const server = express();

      server.get('*', (req, res) => {
        return handle(req, res);
      });

      server.listen(CYPRESS_SERVER_PORT, () => {
        console.warn(`SSR server running, client path is http://localhost:${CYPRESS_SERVER_PORT}`);
      });
    })
    .catch(ex => {
      console.error('ex', ex.stack);
      process.exit(1);
    });

  // register handlers for cy.task command
  // https://on.cypress.io/task
  on('task', {
    clearNock() {
      nock.restore();
      nock.cleanAll();

      return null;
    },

    async nock({ hostname, method, path, statusCode, body }) {
      nock.activate();

      console.log(
        'nock will: %s %s%s respond with %d %o',
        method,
        hostname,
        path,
        statusCode,
        body,
      );

      // add one-time network stub like
      // nock('https://icanhazdadjoke.com').get('/').reply(200, ...)
      method = method.toLowerCase();
      nock(hostname)
        [method](path)
        .reply(statusCode, body);

      return null;
    },
  });

  return config;
};

사용법은 다음과 같다. body에 mock data를 넣어주자.

import projectDetail from '../../fixtures/project/projectDetail';

describe('상세페이지', () => {
  beforeEach(() => {
    cy.task('clearNock');
  });

  context('기본', () => {
    before('', () => {});

    it('랜더 체크', () => {
      cy.task('nock', {
        hostname: Cypress.env('API_URL'),
        method: 'GET',
        path: '/api/v2/projects/2000',
        statusCode: 200,
        body: projectDetail,
      });
      cy.visit('/projects/2000');
    });
  });
});

cypress 버전은 다음과 같다. "cypress": "^9.1.1",

뭐 공식문서에서도

Recommended: getStaticProps or getServerSideProps.

If you're using Next.js 9.3 or newer, we recommend that you use getStaticProps or getServerSideProps instead of getInitialProps.

이걸 쓰라고 하니 차근차근 바꿔나가는 작업이 필요해 보인다.

공식문서와 nextjs 관련 이슈들을 읽다보니 우리 프로젝트에는 어떻게 적용시킬 수 있을까? 고민이 많이 들었다.

공식 문서를 살표보니 SSG는 유저의 요청에 관계없이 같은 화면을 보여줘도 상관없을 때, 쓰라고하는걸 보니 상세페이지들에 사용하면 되겠다 싶었다. (매번 같은 api를 호출 하니깐 !?)

이것저것 해보고 싶은 마음이 생겨 무작정 프로젝트를 하나 만들어 보며 이것저것 해보았다.

뭐 대충 회사 API를 활용하여 다음과 같이 페이지 하나를 만들어 보았다.

import axios from "axios";

const Detail = ({ happyfolio }) => {
  return happyfolio ? (
    <div>
      <div>{happyfolio.id}</div>
      <div>{happyfolio.title}</div>
    </div>
  ) : (
    <span>No happyfolio</span>
  );
};

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

export const getStaticProps = async (context) => {
  try {
    const { data } = await axios.get(
      `http://localhost:8080/api/v2/happyfolios/${context.params.id}`
    );
    return {
      props: { happyfolio: data },
    };
  } catch (err) {
    console.log("err", err);
  }

  return {
    props: {},
  };
};

export default Detail;

이제 빌드를 해볼까

.next/pages/detail에 8.html, 8.json 파일이 생겼다!

getStaticPaths에 params로 전달해줬던 id값들을 읽고 다음과 같이 정적파일들을 만들어 준것이다.

Home화면에는 다음과 같이 여러 링크들을 넣어보았다.

import Link from "next/link";

const Home = () => {
  return (
    <div>
      hello next
      <Link href="/about">about</Link>
      <Link href="/sample">sample</Link>
      <Link href="/detail/5">5</Link>
      <Link href="/detail/6">6</Link>
      <Link href="/detail/7" prefetch={false}>
        7
      </Link>
      <Link href="/detail/8">8</Link>
    </div>
  );
};

export default Home;

next start 실행 후 메인페이지에 접속해보니, Link들의 prefetch로 인해

5,6 html, json 파일이 추가로 생긴것을 볼 수 있었다. fallback을 true로 설정해주면 params로 getStaticProps에 전달해주지 않아도 최초 request시 해당 파일들을 생성해주는건가보다.

7번 파일은 Link 태그의 attr 중 prefetch={false}로 인해 정적 파일을 pre-render 하지 않은 모양이구

다음엔 getServerSideProps에 대해 알아봐야겠다. getInitialProps와 어떤게 다르고 어떤 점이 더 좋아졌는지 말이다.

이슈 1. page에서 store 접근

기존 페이지 getInitialProps에서는 app.tsx에서 next-redux-wrapper에서 redux를 연결시켜주어 context에서 store에 접근이 가능하였지만, SSG를 위해서는 page 마다 따로 연결시켜줘야 하나보다..

요런식으로

export const getStaticProps = wrapper.getStaticProps(async context => {
  return { props: {} };
});

이슈 2. hydrate 관련 문제

분명 SSG에서도 store에 접근이 가능하다고 했는데, 왜 store에 저장이 안되지 ? 혹시 안되는건가... 하고 유심히 코드를 뒤져보았다. hydrate 이놈 .. SSR을 도입하면서 골머리를 썩였던놈

찾아보던 중 우리 enhancedReducer에서 이상한 점을 찾았다.

  if (action.type === HYDRATE) {
    if (state === initialRootState) {
      return {
        ...state,
        ...action.payload,
      };
    }
    return state;
  }

으음 .. if (state === initialRootState) 이녀석은 왜 필요한거지 관련 자료를 찾아 다음과 같이 수정해 주었다.

 if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    return nextState;
  }

잘 작동한다. 아마 Hydrate가 필요없는 상황에서 실행되는게 싫어서 저렇게 처리한것 같다. 기존 코드에 문제가 생길 수 있으니 관련 테스트가 좀 필요해보인다.

최근 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를 호출하고 싶음... 있는지만 체크하고 싶은데 해결 방법 아시는 분?)

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