이 코드의 문제점은 무엇일까?
바로 async 함수 2개가 순차적으로 이루어진다는 점이다.

const movie = await getMovie(id);
const videos = await getVideos(id);

처음에 getMovie 함수가 실행되고, 이 함수가 완료되어야만 getVideos가 실행된다.
동시에 실행(페칭)하는게 최적화에 더 도움이 된다.
==> Promise.all()

Promise.all()

promise.all()

promise.all()는 자바스크립트에서 여러 비동기 작업을 동시에 실행하고, 모든 작업이 완료될 때까지 기다렸다가 결과를 배열 형태로 반환하는 함수입니다. 쉽게 말해, 여러 Promise를 모두 이행할 때까지 기다린 후, 그 결과를 한꺼번에 받아볼 수 있게 해줍니다.

하지만 이렇게 하면 두개의 프로미스(getMovie(id), getVideos(id)) 가 다 끝나야 렌더링이 되어 UI볼수있음
둘다 동시에 페칭하는건 좋음. 하지만 Promise.all처럼 둘다 끝날때까지 기다려서 ui 보여주기보단,
동시에 페칭하되 getmovie가 끝나면 movie 보여주고, getvideo가 끝나면 video 보여주기
==> Suspense

Suspense

위에서처럼 한 page 파일에서 두가지 fetch를 기다리기보다,

병렬적으로 2가지를 동시에 fetch하되, Promise.all처럼 모든게 완료될때까지 기다리기보다, 하나의 요청이 완료되면 즉시 렌더 되도록 하자
다른 컴포넌트를 안기다려도됨

HOW?🧐
둘다 컴포넌트로 따로 빼고 import 해서 Suspense 태그로 감싸주자

👆이런식으로 movie-videos만 따로 서버컴포넌트로 뻄👆

그리고 컴포넌트를 보여줄 디테일 페이지에서 컴포넌트를 불러오고,
Suspense로 감싸준다

Suspense 는 데이터를 fetch하기 위해 안에 있는 컴포넌트를 await한다. fetching중(로딩)에는 fallback을 렌더링함.

info와 video 동시에 요청들어가지만
👇video가 먼저 요청완료되면 바로 보여줌👇

⚡➕ fetch 사용했으므로 데이터 캐싱되어서 다시 들어가면 로딩안뜨고 데이터 바로 뜸.

정리

여러 데이타를 페칭할때 promise.all보다 더 강력한, 동시에 페칭을 구현해줄뿐만 아니라 하나가 완료되면 바로 ui보여주는 Suspense를 쓰도록 하자

로딩 정리

Page 단위 로딩 => loading.tsx
서버 컴포넌트 단위 로딩 => Suspense

Error Page

page.tsx가 있는 폴더 안에 error.tsx 생성하면됨
'use client' 해야한다