Next.js

next.js는 page를 html 형태로 export 하던지
pre-render를 한다 - 초기 상태는 html
적어도 무언가 볼 수 있다..

하지만 SSR을 하게되면 API 요청이 끝날 때 까지

SSR

SSR로 fetch를 하면 {!movies &&

Loading...

} 같은 코드는 필요 없다
export function getServerSideProps() 사용
이 이름은 next.js에 정해져있는 것으로 변경하면 안된다 - export 포함

여기서 작성된 코드는 서버에서만 돌아간다

서버에서 api key를 숨길 수 있기 때문에
꼭 rewrites를 써서 숨길 필요는 없다

export async function getServerSideProps() {
  // 여기서 무엇이 return되던 pageProps로 들어간다
}

getServerSideProps()의 return은
_app.tsx의 pageProps를 통해 전달되고

index의 props로 들어간다

ssr을 하게되면 렌더링된 정보를 가져오기 때문에
개발자 도구 Elements에 페이지 정보가 다 들어있음 -> SEO에 좋겠다
props는 Elements

하지만 api를 받아오기 전에는 페이지 렌더링이 되지 않는다

클라이언트 사이드로 render되면 어느 시점부터 react가 주도권을 가져간다
next.js가 넘겨준 props를 이용해 react가 화면을 그린다

import { Result } from "../types/movie";

interface Props {
  results: Result[];
}

export default function Home({ results }: Props) {

}


// server에서만 돌아가기 때문에 client의 주소를 입력해줘야 함
export async function getServerSideProps() {
  const { results } = await (await fetch(`http://localhost:3000/api/movies`)).json();
  return {
    props: {
      results,
    },
  };
}