Next.js와 리덕스로 SSR하기

CSR과 SSR

CSR

CSR은 데이터를 얻기 위해서 요청이 2번 간다. 사용자가 새로고침을 하면 프론트 서버에서 HTML과 JS를 브라우저에 주고 그 이후에 또 요청을 하여 추가적으로 데이터를 불러온다.

SSR

SSR은 데이터를 얻기 위해 요청이 1번 간다. 서버에서 즉시 렌더링 가능한 html 파일이 만들어져 있기 때문에 바로 렌더링이 된다. 이로 인해 초기 로딩 속도가 빨라진다. 즉, 사용자는 콘텐츠가 빠르게 보이는 느낌을 줄 수 있다.

SSR 적용 방법

index.js

useEffect(() => {
  dispatch({
    type: LOAD_MY_INFO_REQUEST,
  });
  dispatch({
    type: LOAD_POSTS_REQUEST,
  });
}, []);

처음 시작이 되는 페이지인 index.js에서 위 코드 같은 사용자 정보를 얻어오는 것에서 시간이 걸린다. 따라서 ssr을 하기 위해서는 getServerSideProps나 getStaticProps를 활용하여 위 코드를 바꿔야 한다. 우선은 getServerSideProps로 예시를 들어보겠다.

getServerSideProps

export const getServerSideProps = wrapper.getServerSideProps(
  async (context) => {
    // 서버쪽으로 쿠키 전달을 위한 코드
    // 아래 if문를 추가하지 않으면 다른 사람이 내 쿠키를 공유할 수도 있는 문제가 발생한다.
    // 쿠키를 써서 요청을 보낼때 쿠키를 넣어놨다가 쿠키 안써서 요청보낼때는 쿠키를 비워둔다.
    const cookie = context.req ? context.req.headers.cookie : "";
    axios.defaults.headers.Cookie = "";
    if (context.req && cookie) {
      axios.defaults.headers.Cookie = cookie;
    }
    context.store.dispatch({
      type: LOAD_MY_INFO_REQUEST,
    });
    context.store.dispatch({
      type: LOAD_POSTS_REQUEST,
    });
    // 요청이 Request에서 끝나는게 아니라 SUCCESS에서 받아올 수 있도록 기다리는 코드
    context.store.dispatch(END);
    await context.store.sagaTask.toPromise();
  }
);

위에 useEffect로 작성한 코드를 getServerSideProps로 바꾼 코드이다. 이 코드를 index.js에 넣어주면 getServerSideProps가 먼저 실행된다. 그러면 화면을 그리기 전에 서버쪽에서 먼저 실행이 된다. getServerSideProps는 브라우저에서는 실행이 되지 않고 프론트 서버에서만 실행이 된다. 원래는 쿠키 설정을 하지 않아도 브라우저에서 알아서 보내줬지만 SSR을 할 때는 쿠키를 직접 넣어줘야 한다.

getServerSideProps에서 dispatch를 하면 store에 변경이 생기는데 초기에 init에서는 이 정보를 받지 않는다. reducers/index.js의 HYDRATE에서 이 정보들을 받아준다. 

reducers/index.js의 HYDRATE

const rootReducer = (state, action) => {
  switch (action.type) {
    case HYDRATE:
      console.log("HYDRATE", action);
      return action.payload;
    default: {
      const combinedReducer = combineReducers({
        user,
        post,
      });
      return combinedReducer(state, action);
    }
  }
};

이렇게 코드를 작성해 주면 서버에서 받은 데이터를 store에 덮어쓸 수 있다.

 

이런 방식으로 코드를 작성하면 SSR을 구현할 수 있다. 특정 페이지를 조회하면 get 메서드로 데이터를 받아오는데 ssr을 하면 서버에서 html 파일을 주기때문에 이를 바로 렌더링 시켜준다. 이때 사용되는 html 파일을 검색 엔진이 보고 검색을 해준다.

getStaticProps vs getServerSideProps

getStaticProps

getStaticProps는 언제 접속해도 데이터가 바뀔 일이 없을 때 유용하다. 예시로는 블로그 게시글, 뉴스처럼 웬만하면 안 바뀌는 경우에 사용한다. getStaticProps는 next.js에서 빌드할 때 정적인 html로 바꿔준다. 이러면 다른 사람들이 페이지를 요청했을 때 html 파일을 제공하여 서버에 무리가 덜 간다. 하지만 웬만한 페이지는 데이터가 바뀌기 때문에 html로 미리 만들어 놓기 어려워서 getStaticProps는 사용하기 까다롭다.

getServerSideProps

getServerSideProps는 접속하는 상황에 따라서 화면이 바뀌어야 하는 상황에 사용하는 것이 좋다. 웬만한 경우 getServerSideProps을 사용한다.