[TIL] 노마드코더 nextJS - 5

next js는 페이지를 html 형태로 export하거나 pre rendering 함

html 이 initial state 

> 모두 렌더링 되기 전에 이미 내비바랑 html에 써놓은 loading이 보임

create react app 같은 경우 렌더링이 되기 전까지는 아무것도 안 보일 것.

 

이 로딩 페이지가 보여지기 싫을 때

api가 모두 완료되었을 때 보여주고 싶을 때

data가 들어올 때 모두 render 되게!

 

getServerSideProps

getServerSideProps 는 클라이언트가 아니라 무조건 서버에서만 돌아서

뭔가를 써도 클라이언트엔 보여지지 않음! 

> rewrites로 했던 api key 숨기기도 여기서 할 수 있다.

 

우선 원래 썼던 fetch api movies 부분을 지워주고

로딩 화면을 안 보여줄 거니까 Loading도 지워주고

아래에 getServerSidProps를 적어준다.

저기서 props에 주는 results는 Home으로넘겨주는 props results

 

/ 에 들어갔을 때 Component에 index.jsx의 Home이 들어가고

이 부분을 호출. 그럼 getServerSideProps를 사용할 거란 걸 알게 되고

api에 호출 > props(results)를 리턴

이 리턴된 props가 

pageProps에 들어가고 그 props는

Home에서 받는 props에 들어간다.

getServerSideProps는 server side에서만 돌아간다!!

 

* client에서는 http://localhost:3000 에서 돌아가니까 api movies 라고 해도 되지만

server에선 링크 전체로 입력해줘야 함

이거까지 해주고 나면 페이지가 잘 뜬다! 

똑같아 보여도 로딩이 일어나지 않고 있다.

소스코드를 보면 이렇게 모두 HTML로 들어와 있다!

> Loading 페이지가 뜨지 않는다

> 대신 api에서 data를 받아오기 전까진 아무 것도 뜨지 않는다

 

난 로딩 페이지가 있는 게 더 좋은 것 같다,,

유저 입장에서 그냥 하얀 화면만 보이면 이게 멈춘건지 되고 있는건지 모르겠는데

로딩이 돌아가는 걸 보면 아 로딩 중이구낭 기다려야겠네 하니까...!

대신 네트워크가 굉장히 빠르거나 화면의 내용이 없으면 서버사이드가 좋은 듯

 

* 처음엔 이렇게 서버사이드지만 

어느 시점부터 다시 클라이언트 사이드가 될 것

> api 를 호출하고 data를 다 받아오고 나서겠지?

 

next js가 props를 받아서 넣어주고 react js가 받아서 흡수한다!

그럼 react js가 주도권을 가져오고 results에서 여러가지를 할 수 있음!