streaming이 뭐징? (Next.js)

streaming이 뭐징? 멜론인가?

스트리밍이란?

스트리밍은 큰 데이터를 여러 작은 조각(chunk)으로 나누어 서버에서 클라이언트로 순차적으로 전송하는 기술이다. 즉, 모든 데이터가 한꺼번에 로드될 때까지 기다리지 않고, 준비된 부분부터 조금씩 화면에 보여줄 수 있다.

공식문서 이미지 설명

• 왼쪽 그림:
  • 페이지의 일부 콘텐츠만 먼저 로드된 상태이다. 이 상태에서 사용자는 페이지의 일부를 먼저 보고 상호작용할 수 있다. 나머지 데이터는 백그라운드에서 계속 로드되고 있다.
  • 이러한 방식을 통해, 데이터 로딩이 느려도 전체 페이지가 차단되지 않고, 사용자는 이미 로드된 콘텐츠를 사용할 수 있다.
• 오른쪽 그림:
  • 중간에 중단된 콘텐츠가 스트리밍으로 순차적으로 들어오는 모습이다. 모든 데이터가 준비되기 전에도 사용자에게 점진적으로 콘텐츠를 보여줄 수 있다.

• 타임라인 이미지 설명
  - A, B, C, D로 표시된 각 작업이 순차적으로 진행
  - A: 서버에서 데이터를 가져오는 1 단계
  - B: 서버에서 HTML을 렌더링하는 2 단계
  - C: 클라이언트에서 코드를 로딩하는 3 단계
  - D: 클라이언트에서 화면을 완전히 활성화(hydrate)하는 4 단계
  - 각 컴포넌트가 별도로 스트리밍되므로, 전체 페이지가 모두 로드되기 전에도 각 부분을 빠르게 볼 수 있다.
  유저입장에서는 아 이게 멈춘게 아니고 로드되고 있구나.. 이런 심리적 안정감..?
  

요약

스트리밍을 사용하면 데이터 로딩이 느려도 전체 페이지가 차단되지 않고, 사용자에게 점진적으로 화면을 보여줄 수 있다. 이는 특히 React와 같은 컴포넌트 기반 모델에서 좋다잉.

자세하게 공식문서 코드로 알아보기
https://nextjs.org/learn/dashboard-app/streaming