NextJS 공부 - 4(getServerSideProps, useRouter)

in hive-101145 •  4 months ago 

오늘은 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}`
    );

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

image.png

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 23.30%, steem power : 1911204.22, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 45.708 KRWP [60990897 - 2e1cea44eca583b560eb35e40b25e8cb9a7393c9]