• 어떻게 slow data request가 있을때 UX를 개선할 수 있을지 알아보자.
• In this chapter... Here are the topics we’ll cover
  • What streaming is and when you might use it.
  • How to implement streaming with loading.tsx and Suspense.
  • What loading skeletons are.
  • What route groups are, and when you might use them.
  • Where to place Suspense boundaries in your application.

What is streaming?

• Streaming이란 route(특정 URL path에 해당하는 page의 HTML(데이터))을 작은 “덩어리chunks”로 쪼개어 서버에서 클라이언트로 전송하는 기술이다.

  

• Streaming을 통해 특정 slow data request가 페이지 전체를 block하는 것을 방지할 수 있다(즉 이런 경우에 특히 유용하다). Streaming을 사용하면 부분적으로 로딩이 먼저 되는대로 화면에 요소가 그려지게 되고, 전체 데이터가 로딩되기까지 기다릴 필요 없이 유저는 이미 로딩이 완료된 부분을 보고, 상호작용할 수 있다.

  

• Streaming은 React의 컴포넌트 모델과도 잘 맞는데, 왜냐하면 리액트의 각 컴포넌트를 Streaming에서 말하는 chunk로 취급할 수 있기 때문이다.

• Next.js에서 streaming을 하기 위해서는 두가지 방법을 사용할 수 있다.

  1. At the page level, with the loading.tsx file (페이지 전체에 대한 로딩 화면 적용 가능)
  2. For specific components, with <Suspense> (컴포넌트 별로 적용 가능)

• 참고:

  Routing: Loading UI and Streaming

Quiz

• 정답

Streaming a whole page with loading.tsx

• /app/dashboard 폴더에 새로 loading.tsx 파일을 생성하여 아래와 같이 코드를 작성해주자.

  export default function Loading() {
    return <div>Loading...</div>;
  }
  

  • 그러면 아래와 같이 로딩하는 동안 작성한 로딩 컴포넌트가 대신하여 화면에 표시된다.

    

    • dashboard page에 해당하는 부분 전체에 적용되는 것을 확인할 수 있다.

• 여기에는 몇가지가 동시에 일어나고 있다.

  1. loading.tsx는 Suspense를 기반으로 만들어진 특별한 Next.js 파일이며, 페이지 내용이 로딩되는 동안 보여줄 fallback(예비) UI를 만들 수 있도록 해준다.
  2. <SideNav> 컴포넌트의 경우 static이기 때문에 화면에 즉시 보여진다(로딩 되는 동안에도). 즉 유저는 dynamic content가 로딩되는 동안에도 <SideNav>와 상호작용할 수 있다.
  3. 유저는 페이지 로딩이 완료될때까지 기다릴 필요 없이 다른 페이지로 이동할 수 있다(user can navigate away). 이것은 interrutable navigation이라고 부른다.
     1. 해보니까 그렇다고 해서 다른 페이지로 이동해 있는 동안 처음 로딩이 계속 진행되는건 아니었다. 그니까 가서 딴거 하다가 돌아온다고 해서 로딩이 끝나 있지는 않다는 것.
     2. 심지어는 한번 로딩되고 나서도 다른 페이지 갔다가 오면 다시 로딩을 한다.
     3. 근데 또 다시해보니까 그렇지는 않네?? 뭐지. 다른곳 이동해 있는동안 로딩이 계속 진행되고, 또 로딩하고 나면 다른데 갓다와도 재로딩 없고. 이럴때도 있다. 뭐지. 정상동작은 어떤건지..