MouseNext/AppRouter - 5. 스트리밍

페이지 스트리밍

스트리밍 - 큰 데이터를 여러개의 작은 데이터로 나누어 보낸다.
페이지 스트리밍 - 로딩이 오래 걸리는 컴포넌트를 먼저 대체 UI를 보여준 후 로딩이 완료되면 컴포넌트를 보여준다. Dynamic 페이지에 많이 사용한다

// search폴더 loading.tsx
export default function Loading() {
	return <div>Loading..</div> 
}

한 폴더 내부에 loading.tsx 파일을 만든다면 그 페이지가 오래 걸릴 경우 페이지 스트리밍을 진행하게 된다.

주의할점
1. 최상단 폴더 아래 있는 모든 페이지를 스트리밍을 진행한다.
ex) search
- page.tsx
- loading.tsx
- setting - page.tsx -> 해당 파일도 loading.tsx로 스트리밍을 진행한다.

2. 모든 컴포넌트가 아닌 async라고 붙은 비동기 컴포넌트만 스트리밍을 진행한다.
3. page.tsx 파일만 가능하다. -> Suspense로 해결 가능