Next - getServerSideProps

getServerSideProps : page가 요청 받을때 마다 호출되어 pre-rendering

- SSR (Server Side Rendering) 개념
- pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용
- 매 요청마다 호출, 내용을 언제든 동적으로 수정이 가능

 
문법
1 ) Return Values
: props, notFound, redirect 의 3 가지 리턴값을 가진다.

- props : Page 컴포넌트의 props에 전달될 객체를 서버로부터 받아온 데이터를 가공하여 전달해주는데 활용
- notFound : boolean 값을 가지며 { notFound: true } 가 리턴되면 해당 페이지는 404 응답과 함께 Page Not Found 화면으로 이동
- redirect : 개발자가 지정한 경로로 페이지를 리다이렉트하기 위해 사용되는 값

export const getServerSideProps = async ({ params }) => {
  const res = await fetch(
    `url`
  );
  const abc = await res.json();
  return {
    props: { abc, id: params.id },
  };
};

2) Parameter 
: getServerSideProps는 context 라는 파라미터를 받는다.

context: {
    params: 페이지가 Dynamic Route 를 사용한 경우 들어오는 데이터, 
    pages/[id].tsx 라면 params 에는 id 값이 들어온다.

    req: Request 정보 
    res: Response 정보 
    query: 쿼리 스트링 데이터가 담겨있다.
    preview: Preview 모드 사용 유무 (boolean)
    previewData: Preview 모드 사용시 전달된 데이터
    resolvedUrl: Request 된 URL 의 좀 더 일반화된 버전의 url
    locale: 현재 locale 정보
    locales: 지원되는 모든 locale 정보
    defaultLocale: 기본 locale 정보
}

 

출처

 

https://yohanpro.com/posts/nextjs/data-fetching

Next.js에서 data-fetching하기 - Yohan's Developer Diary

https://woobiblog.com/Javascript/Nextjs_Data_Fetching_getServerSideProps

[Next.js] Data Fetching - getServerSideProps

https://beside-lab.tistory.com/entry/Nextjs-getStaticProps-vs-getServerSideProps-%EC%B0%A8%EC%9D%B4%EC%99%80-%ED%99%9C%EC%9A%A9

Next.js - getStaticProps vs. getServerSideProps, 차이와 활용