Next.js는 SSR을 이용해 pre-rendering이 가능하다.
getServerSideProps 이라는 함수를 사용하면 SSR을 사용할 수 있다.

기본형태

export function getServerSideProps() {
 
  return {
   props : {
   }, 
  };
}

getServerSideProps는 객체를 반환하는데 props 속성 안으로 데이터가 전달된다.
함수명을 수정하거나 export를 빼먹으면 안된다 (!)

_app.js

export default function App({Component, pageProps}) {
 return <Componet {...pageProps} />; 
}

next.js에서 가장 처음 실행되는 _app.js 파일로 넘어오면 Component, pageProps 를 찾을 수 있는데.

getServerSideProps 에서 return된 props는 pageProps로 넘어오게되는데 그래서 각 page들에서 props로 사용이 가능하다.

언제 사용해야할까?

getServerSideProps 함수 안에서 데이터를 fetch 하는 경우에
데이터를 다 받아오기 전까지는 화면에 아무것도 렌더링이 되지 않는다.
흠. 그러면 사용자 경험에도 좋지 않을거 같고. 굳이 SSR 쓸 필요가 있나 싶다.
물론 이 경우에는 CSR 단점이었던 SEO는 해결할 수 있다.

request time에 반드시 필요한 데이터가 있을 경우 사용하자

데이터를 pre-render 할 필요가 없다면 굳이 getServerSideProps 으로 가져오는게 아니라 client side에서 가져오는 것이 더 현명한 선택일 듯 하다.