Nomflix 리팩토링 - SSR 적용[2]

Next.js를 이용하자

getServerSideProps는 언제 실행 되는가

getServerSideProps는 서버측에만 실행되고 브라우저에서는 실행되지 않는다.

해당 페이지를 직접요청하면 getServerSideProps 요청시 실행되고 반환되는 props를 pre Rendering하게 된다.

• next/link or next/router를 사용하여 client-side page 이동을 요청하면 getServerSideProps를 사용하면된다

getServerSideProps는 페이지에서만 사용할수있으며, 페이지 이외의 파일에서는 사용할수없다

getServerSideProps는 언제 사용해야하는가?

getServerSideProps요청시 데이터를 가져와 페이지를 미리 렌더링 시켜야하는 경우에만 사용해야한다.

데이터를 미리 렌더링할 필요가 없다면 클라이언트 측에서 데이터를 가져오는 것을 고려해야한다.

라고 공식문서에 친절하게 적혀있었습니다.

Clent-Side에서는 데이터 페칭을 많이 해봤는데
getServerSideProps는사용해보지 않았기때문에
NomFlix 프로젝트에서는 getServerSideProps를 사용하여 데이터 통신을 해보겠슴

Movie 리스트를 받아오는 getServerSideProps

예시하나만 들어서 Movie 리스트를 받아와보자

이러한 Movie List 들을 받아올것이다

기존에는

useEffect(() => {
    async function fetchData() {
      try {
        const {
          data: { results: nowPlaying },
        } = await movieApi.nowPlaying();
        const {
          data: { results: upcoming },
        } = await movieApi.upcoming();
        const {
          data: { results: popular },
        } = await movieApi.popular();
		loading.current = false;
        setNowPlaying(nowPlaying);
        setUpcoming(upcoming);
        setPopular(popular);
      } catch (error) {
        setError("Can't find movies infomation.");
      } 
    }
    fetchData();
  }, [loading]);

이렇게 Client-Side 에서 Fetching 하여 상태에 집어넣어주었었다.

이를 지워주고 아래 코드를 컴포넌트 밖에 작성해준다.

export const getServerSideProps: GetServerSideProps = async () => {
  try {
    const {
      data: { results: nowPlaying },
    } = await movieApi.nowPlaying();
    const {
      data: { results: upcoming },
    } = await movieApi.upcoming();
    const {
      data: { results: popular },
    } = await movieApi.popular();
    return { props: { nowPlaying, upcoming, popular } };
  } catch (err) {
    const ErrorMessage = "Can't find movies infomation.";
    return { props: { ErrorMessage } };
  }
};

try 절에서 nowPlaying, upcoming, popular 들을 통신하여 받아오고 성공시 반환해줍니다.
catch 절은 요청 실패시 에러메세지를 반환해줄겁니다.

그후

interface ServerSideProps {
  nowPlaying: Array<MOVIE_TYPE>;
  upcoming: Array<MOVIE_TYPE>;
  popular: Array<MOVIE_TYPE>;
  ErrorMessage: string;
}
const Home = ({ nowPlaying, upcoming, popular, ErrorMessage }: ServerSideProps) => {
const [error, setError] = useState('');
  const loading = useRef(true);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    if ((useIsNull(nowPlaying) && useIsNull(upcoming) && useIsNull(popular)) === false) {
      loading.current = false;
    }
  });
}

server 측에서 이미 받아오므로 기존에 사용하던 필요없어진 state 들을 지워주었습니다.

그후 props들이 비엇는지 안비엇는지 확인후 loading을 false로 바꿔주었습니다!

그렇다면 이렇게 새로고침시에도 자알~~ 나옴

Next.js를 많이 사용해는봤지만
자동라우팅의 편리함이라는 이유하나만으로 사용했었는데

SSR을 적용해본것은 처음이라서 신기한 경험이었다.