[Next.js 14] 1. Routing - 3

4. Loading UI and Streaming

• loading.js 파일은 React Suspense Component를 활용하여 Loading UI를 만들 수 있다. 
• 즉각적으로 Loading UI를 보여주고(instant loading state), 로딩된 컨텐츠가 한 번의 렌더링 안에서 자동으로 스왑된다.

4-1. Instant Loading State

• 즉시 로딩 상태는 특정 Route에 Navigation해서 접근할 경우, 바로 Loading UI를 보여줄 수 있는 것을 의미.
• 단, 렌더링 지연이 발생하지 않으면 Loading UI는 표시되지 않는다.
• layout file 내부에 Suspense Components와 함께 생성되고, page를 감싸는 형태로 자동으로 작성된다.

1. Navigation은 즉각적으로 발생한다.
2. Navigation은 중단 가능하며, 로딩 중이던 컨텐츠의 로드를 기다리지 않고 다른 Route로 이동 가능하다.
3. loading이 진행 중이더라도 공유 레이아웃은 여전히 상호작용이 가능하다. 
-> route의 segments 마다 loading.js를 적용하는 것이 Next.js의 최적화된 기능을 이용할 수 있다.

4-2. Streaming with Suspense

• App Router는 Suspense Component를 활용하여 Streaming Rendering을 지원한다. (Node.js, Edge runtime)
•  기존 SSR 방식은 Data fetch -> HTML Render -> HTML, CSS, JS Send to client -> HTML, CSS Rendering -> Hydrates -> can interactive.
  

  

  이 과정을 거쳐야 사용자는 비로소 상호작용이 가능하다.

• Streaming을 사용하면, HTML을 작은 청크 단위로 쪼개 점진적으로 client에서 렌더링이 가능하다.
• 우선 순위가 높은 UI, 데이터가 필요 없는 UI 등을 먼저 그리고 이후 UI를 로딩할 수 있다.
  

  

  TTFB와 FCP, TTI의 시간을 감소시킬 수 있어 사용자 경험 상승.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

• Loading UI를 표시하다가, 작업이 완료되는 순으로 컴포넌트 스왑 발생.
• Straeming을 사용할 때, generateMetadata를 통해 head tag가 먼저 렌더링 되기 때문에 SEO에 영향이 없다.
• 이미 Streaming이 시작된 경우, Status Code는 200이 떨어지므로 변경할 수 없지만 notFound, redirect 함수등을 활용해서 에러 상황을 처리할 수 있다. 

 

처음 뵙겠습니다.

Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.

1. Node.js, Edge runtime : 잠깐 살펴봤는데 각 Segment에 runtime 환경을 지정해서 사용할 수 있는 API를 제한 할 수 있는 기능인 것 같다?
2. generateMetadata : meta data를 동적으로 만들 수 있는 API 인가??????

Preference

• https://nextjs.org/docs/14/app/building-your-application/routing/loading-ui-and-streaming

Routing: Loading UI and Streaming | Next.js