export default function Page() {
return (
<h1>스트리밍 공부하기 🤓</h1>
);
}⚡️ 스트리밍(Streaming)
- 강물이나 개천을 통해 물자를 보내듯이, 잘게 쪼개진 데이터들을 연속적으로 보내는 기술.
- 따라서 모든 데이터가 불러와진 상태가 아니더라도, 전달 받은 데이터에 접근이 가능하다. 결과적으로는 사용자에게 긴 로딩 없이 좋은 UX 제공이 가능하다.
Next는 이러한 스트리밍 기술을 HTML 페이지에 적용해 제공하고 있는데, 사용자에게 일단 뭐라도 빠르게 보여줄 수 있다는 장점이 있으며, 데이터 페칭 부분과 같이 느리게 로딩되는 부분은 로딩 바와 같은 대체 UI를 띄우는 식으로 구현할 수 있다.
스트리밍은 Dynamic Page에 자주 활용된다
다시 정리하면, 특정 페이지를 렌더링할 때 비동기 작업이 존재하지 않아 빠르게 렌더링할 수 있는 컴포넌트들부터 즉시 렌더링하고, 비동기 작업을 포함하고 있어 렌더링하는데 시간이 오래 걸리는 컴포넌트들을 이후에 렌더링하는 방식을 스트리밍이라고 한다.
⚡️ 스트리밍 적용하기
우리 프로젝트에서 유일한 Dynamic Page인 search 페이지에 스트리밍을 적용해보자.
✳️해당 페이지 컴포넌트와 동일한 위치✳️에 📁 loading.tsx 파일을 만들고 대체 UI를 구현한다. 이렇게 설정하면 search 페이지는 자동으로 스트리밍되도록 설정된다.
⚠️ 주의할 점 1. loading.tsx 파일은 현재 경로 및 하위 경로에 있는 모든 파일들에 스트리밍을 적용한다.
따라서 스트리밍을 일부만 적용되길 원한다면 파일 구분 필수!
⚠️ 주의할 점 2. loading.tsx 파일은 async 키워드가 붙어 비동기로 작동하는 페이지 컴포넌트에만 스트리밍을 제공한다.
스트리밍은 데이터 페칭을 적용하는 부분에 필요하니 당연한 말씀 ~
⚠️ 주의할 점 3. loading.tsx 파일은 📁 page.tsx 파일에만 스트리밍을 제공한다.
일반적인 컴포넌트 파일에는 loading.tsx 파일을 통한 스트리밍이 적용되지 않는다. 일반적인 컴포넌트 파일에 스트리밍을 적용하기 위해서는 리액트의 Suspense 객체 를 사용해 적용해야 한다! (To be continue ...)
⚠️ 주의할 점 4. loading.tsx 파일을 통한 스트리밍은 브라우저에서 쿼리 스트링이 변경될 때는 트리거링되지 않는다.
페이지의 경로가 바뀌지 않고 쿼리 스트링만 변경된다면 스트리밍을 제공하지 않는다는 뜻이다.
예를 들면 이미 검색어를 입력해서 검색 결과가 띄워진 페이지에서 다른 검색어를 입력한다면, 페이지의 경로가 바뀌지 않은 채 쿼리 스트링만 변경되게 된다. 이 때는 스트리밍이 제공되지 않는다.
이 때에도 스트리밍이 적용되게 하고 싶다면 이것 역시 리액트의 Suspense 객체 를 이용해야 하는데 이건 내일 살펴보도록 하겠다 ^_^
Reference
👩🏻🏫 한입 크기로 잘라 먹는 Next.js(15+) https://www.inflearn.com/course/한입-크기-nextjs/
