🏞️스트리밍이란?
서버에서 클라이언트에 데이터를 보낼때 데이터가 너무 크면 잘게 쪼개서 물에 흐르듯 하나씩 보내준다!
- 자체적으로 제공하고 있다.
- 일단 뭐라도 보여줄 수 있음.
- 즉시 보여줄수있는 것부터 보여준다.
- 후에 비동기 페이지 컴포넌트가 랜더링되면 로딩후에 보여준다.
🤔언제 사용하나?
- dynamic페이지에서 자주 사용한다.
✏️실습
- 검색에 api의 결과가 늦어질수록 페이지 로딩이 늦어질것이다.
- 전체 페이지의 랜더링까지 늦어지지 않도록
1. loading.tsx 만들기
- 만드는 순간 스트리밍이 된다.
- 로딩중일떄는 로딩 컴포넌트가 대체 ui가 된다.
너무 빨리 데이터가 패칭된다.
- 딜레이를 발생시키는 함수만들기
- util> delay.ts(비동기 함수)
2. 로딩 컴포넌트가 나온다.
⚠️주의할 점
1. loading.tsx 해당하는 경로 아래에있는 모든 페이지들에 로딩 스트리밍을 만들어준다.
2. async를 사용하는 컴포넌트에서만 사용됨
- 데이터를 가져올려면 무조건 비동기 컴포넌트임.
3. 무조건 페이지 컴포넌트에만 적용할 수 있다.
- 컴포넌트 페이지에서는 사용 불가능
-> react suspense
- .페이지 이동시 스트리밍이 적용되는거임.
✨🌏확장해 나가는 프론트엔드 개발자입니다✏️