速習App Router#6 StreamingHTML

はじめに

この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

目次

1.速習App Router#1
2.速習App Router#2
3.速習App Router#3
4.速習App Router#4
5.速習App Router#5
6.速習App Router#6 <- この記事
7.速習App Router#7

StreamingHTMLについて

レンダリングにかかる時間が異なる二つのサーバーコンポーネントを用意します。
・blog-list.tsx -> 描画に6秒かかるコンポーネント
・news-list.tsx -> 描画に2秒かかるコンポーネント

これらのコンポーネントをSuspenseコンポーネントで囲んで同じpage.tsx内で実行します。

/page.tsx

import BlogList from '../components/blog-list'
import NewsList from '../components/news-list'
import Spinner from '../components/spinner'

export default function StreamingServerRenderingPage() {
  return (
  <Suspense fallback={<Spinner color="border-green-500" />}>
    <BlogList />
  </Suspense>
  <Suspense fallback={<Spinner />}>
   <NewsList />
  </Suspense>
  )
}

news-list.tsxの ロード -> 描画 が終わった後に
blog-list.tsxの ロード -> 描画 が終わる。

つまり、loading.tsxではpage.tsxという単位でしかローディングを実装出来なかったが、
Suspenseコンポーネントで描画に時間のかかるコンポーネントを囲むことで
コンポーネント単位でローディングを実装出来るという事です。