NEXT SSR

넥스트는 초기값으로 HTML을 준다
그래서 HTML을 잘 설정하면 우리가 초기에 원하는 것을 보여줄 수 있다.

react처럼 placeholder를 하지 않아도 초기에 Navbar나 이런 것을 보여주기 때문에
화면이 뭉개지는 것을 막을 수 있다.

HTML을 보면 data가 없는데 이를 SSR을 통해서 data를 넣어줄 수 있다.

getServerSideProps함수를 활용하면 SSR을 사용할 수 있다.

export async function getServerSideProps() {}
라고 선언해줘야하는데 여기서 네이밍은 바꿀 수 없다.
export도 무조건 해줘야한다

여기에 사용하는 코드는 client에서 돌아가는 것이 아니라
server에서 돌아갈 것이다.

만약에 이 함수에 API key를 사용하면 server에서 돌아가서 보여지지 않는다.
이 함수는 object를 return 한다

object 안에는 props라는 key 가 들어 있다.
여기에는 원하는 데이터 아무거나 넣을 수 있다.

이 함수는 props로써 page에게 넘겨준다.

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

이 결과 값을 위 함수에 내려주고 실행하면

이것은 client에서 돌아가는 것이기 때문에 server에서 돌릴 수 없다.

fetch(http://localhost:3000/api/movies)
아래처럼 수정하고 나서 돌려주면 오류가 해결된다.

이후에

오류가 떴는데, fetch에 실패했을 경우 undefind를 보내기 때문에 그 대신에 null 이라도 보내줘야한다는 얘기였다.
설정을 해보니 코드는 잘 돌아가지만 데이터에 문제가 있어서 수정했더니 원활하게 돌아갔다

home 함수에서 패치했을 때는 loading이 필요했지만
SSR을 사용하고 나서는 로딩이 일어나지 않고 있다.
소스코드를 열어보면 기존에 로딩이 있던 자리에

API로 받아온 정보가 HTML에 있다.
(SEO에 유리하다)
우리는 선택 할 수 있다. loading 화면을 보여주고 보여줄 것인가
데이터가 유효할때 화면을 보여주는게 좋은가?

backend에서 보내준 데이터를 result로 받아오고 react는 그 값을 출력해서 HTML에 올려준다.
이 기능은 SEO유리하여 매력적이다.
만약 api로드가 느리다면 오래기다려야한다는 단점이 있다.