14. Data Fetching(데이터 가져오기) - Loading Components(로딩 UI)
서버 실행 시 브라우저가 로딩이 걸리면서 로딩화면이 보이게 되는데
getMovies 함수가 완료되면 데이터가 보여지게 된다.
server componet에서 fetch하는 중에 loading 파일을 제공하면 그 파일이 나타나게 된다.
server component가 fetch를 끝내면 Next JS는 loading component를 page component로 바꿔준다.
이는 streaming 덕분인데 여기서 일어나는 일들은 이 페지이가 content를 streaming하기 때문이다.
나중에 http streaming 문서를 읽을 수 있는데 하지만 실제로 일어나는 건 백엔드에서 로딩중이라는 뜻이다.
그래서 브라우저는 백엔드 작업이 완료되지 않았다고 생각하고 로딩을 하는 것이다.
하지만 Next JS는 사용자가 페이지에 도착하는 순간 loading component를 볼 수 있게 한다.
그 다음 백엔드의 getMovies 함수에서 fetch가 완료되면 백엔드가 브라우저에 완료된 결과값을 보내는 것이다.
그래서 어떤 면에서는 통신이 살아있다고 생각할 수 있다.
웹사이트로 가면 브라우저는 로딩을 하고 있고 Next JS가 하는 것은 웹사이트의 일부를 천천히 보내는 것이다.
첫번째로 보내는 일부분은 layout이나 navigation이고 그 다음에 loading component를 보내는 것이다.
브라우저 검사에서 로딩중이라는걸 볼 수 있고 데이터를 가져오게 되면 10초가 걸린다는걸 확인할 수 있다.
브라우저는 아직 백엔드가 작업을 완료하지 않았다고 생각하고 기다려야 한다고 말하고 있는 것이다.
이때 NextJS는 브라우저에 웹사이트의 일부분을 천천히 주면서 아직 작업이 끝나지 않았다고 계속 말하는 것이다.
그리고 다 끝나고 나면 결과값이 있는 component가 브라우저에 전달되고 그 다음 loading component로 교체되는 것이다.
그리고 Homepage component가 async여야 하는 이유는 Next JS가 이 component에서 await해야 하기 때문이다.
NextJS는 즉시 사용자에게 로딩 상태를 줄 것이고 NextJS는 기본적으로 페이지를 작은 HTML 부분으로 나눠서 준비된 HTML 부분을 브라우저에 줄 수 있는데 navigation bar나 loading component 같은 것이다.
navigation bar나 loading component 이 HTML 부분들은 브라우저에 즉시 전달되고 브라우저에게 백엔드에서 통신이 아직 마무리되지 않았고 기다려줘야 한다고 하는 것이다.
component를 await 하고 있는데 그래서 Homepage component는 async여야 하고 await가 끝나면 브라우저에게 마지막 HTML 부분을 전달해주는 것이다.
그러면 프레임워크가 loading component를 await된 component로 바꿔주는 것이다.
loading 파일은 page 파일 근처에 있어야 한다.