NextJS 공부 - 4(getServerSideProps, useRouter)

오늘은 NextJS에서 어찌보면 가장중요한 부분 Server Side Rendering에 관한 부분입니다!!

바로 시작!!

---

getServerSideProps

• getServerSideProps()와 같이 함수를 선언하고 내부에 소스를 입력하면 여기에 작성된 코드는 "오!로!지!" 서버사이드에서만 작동을 합니다.
• 아래와 같이 fetch로 어떠한 값을 가져오고, 그 결과값을 props로 return을 해주면, 그 props 값을 상단 components에 전달을 해줄 수 있습니다.
• 아래 관련 강의는 노마드코더 NextJS 무료강의 2-3 부분을 들으시면 자세히 알 수 있습니다..!!(글로 설명하기 많이 복잡! ㅠㅠ)
• getServerSideProps은 파라미터 없이도 호출이 되지만, 파라미터로 context 정보를 얻어 올 수도 있습니다.

export async function getServerSideProps(context) {
 console.log(context);
  const { results } = await (await fetch("/api/movies")).json();
  return {
    props: {
      results,
    },
  };
}

userRouter

• useRouter을 이용하여 routing이 가능합니다.
• push 함수를 이용하여 원하는 경로로 routing이 가능하게 됩니다.!!
• sample1 부분과 같이 간단히 사용 할 수도 있고,
• sample2와 같이 여기서도 url rewrite을 해줄 수 있습니다.(게다가 query 처럼 데이터를 넘겨줄 수도 있는데 그부분도 숨겨줄 수가 있는 것이지요..!!)

import { useRouter } from "next/router";

const router = useRouter();
// sample1
router.push(`/movies/${id}`);

// sample2
router.push(
      {
        pathname: `/movies/${id}`,
        query: {
          id,
          title,
        },
      },
      `/movies/${id}`
    );