Next.jsのストリーミングについて

Qiita初投稿です。朝活でNext.jsの研鑽をしていました。

ストリーミングとは？

Next.jsのApp Routerで提供されるストリーミングは、サーバーからHTMLを段階的に送信して、ページを徐々に表示する技術

使い方

Reactのコンポーネントを活用

以下の例では、BlogListコンポーネントを取得している間に、fallbackで指定されているBlogListSkeltonを表示する。

import { Suspense } from 'react'
import BlogList from '@/components/BlogList'
import BlogListSkeleton from '@/components/BlogListSkeleton'
 
export default function BlogPage() {
  return (
    <div>
      {/* This content will be sent to the client immediately */}
      <header>
        <h1>Welcome to the Blog</h1>
        <p>Read the latest posts below.</p>
      </header>
      <main>
        {/* Any content wrapped in a <Suspense> boundary will be streamed */}
        <Suspense fallback={<BlogListSkeleton />}>
          <BlogList />
        </Suspense>
      </main>
    </div>
  )
}

所感

記事投稿で「ストリーミング」タグとしたが、一般的なストリーミングは動画のストリーミングサーバーのことかも？
ただ、ストリーミングサーバーについても、動画を全てダウンロードしなくても動画を再生できる仕組みなので、実現したいことは似ているのかなと思った。

参考

Next.jsドキュメント、ストリーミングについて