RSCでSuspense

RSCすなわちReact Server Componentでロード中はスケルトンを表示させたいと思ったので調べた
結果から言うと非同期のコンポーネントをSuspenseで囲むだけで完了だった

Suspenseとは

https://ja.react.dev/reference/react/Suspense

要するに読み込みが完了するまで別のコンポーネントを表示するAPI
React18から正式導入されてます

公式のドキュメントだとどうやって使うのかは書いているが、自作のコンポーネントの対応方法などはいまいち書いてない

調べてみるとPromiseをthrowするとか書いている記事が多いが、useなどクライアントコンポーネントのケースのようでサーバーコンポーネントの場合どうすればいいかわからなかった

結論

ポストの先頭に書いているが、非同期のコンポーネントをSuspenseで囲むだけで完了する

async_component.tsx

export default async function AsyncComponent({props}: ChildProps){
    // 非同期処理
    return (
        <div>
            { /* 非同期処理で取ってきたパラメータを使うコンポーネント */ }
        </div>
    )
}

parent.tsx

import AsyncComponent from './async_component'
import { Suspense } from 'react'

export default async function ParentComponent({props}: ParentProps){
    // いろいろ処理
    return (
        <Suspense fallback={<div>loading...</div>}>
            <AsyncComponent {...childProps} />
        </Suspense>
    )
}

これで問題なく動作してくれる。

おまけ

なんか調べてもいまいちぱっと出てくる記事がなかったので

一応Next.jsのドキュメントのSuspense/loadingを見るとこれでいいっぽいことが何となく分かるのだが、実際やってみたらこんな感じで簡単だった

ちなみにこれをやってる最中にApp router の loading.tsx で一旦Suspenseを実装したのだが、layout同様に上の階層の loading が（一瞬だが）表示されるのが機に食わなかったのでやめた