Next.js で dynamic import を使い Client だけで動かす Component を実現する

Next.js でサーバを動作させる場合、 App Router か Pages かに関わらず、 SSR がデフォルトの挙動となっているため、 App Router で 'use client' pragma を指定しても SSR される。
そのため、 window に触れる、script タグで読み込んだ widget に useEffect で触れるなど、クライアントでしか動かない処理を含む Component が入っていると正常に動作しない。
そこで回避策として next/dynamic を利用した dynamic import を使用することで、 SSR 時には読み込ませず、 Client でのみ読み込ませるコンポーネントを実現する。
この手段は Client でしか動かない Component の他、データの取得に時間がかかるのでサーバ側での処理はスキップしたい(SSR の結果が返却されたのちに Client 側で fetch を開始したい)場合などにも有効なテクニックである。

ClientOnlyComponent.tsx

'use client'

function ClientOnlyComponent () {
  return (
    // ...
    {console.log('これはブラウザに出力される')}
    <p>これはブラウザでのみ動作している</p>
    //...
  )
}

export default ClientOnlyComponent

page.tsx

import dynamic from 'next/dynamic'

import DynamicClientOnlyComponent = dynamic(import('./ClientOnlyComponent', { ssr: false }))

export function Page() {
  return (
    //...
    {console.log('これは Next プロセスのログに出力される')}
    <DynamicClientOnlyComponent />
    //...
  )
}

default export せずに dynamic(import('./ClientOnlyComponent').then((module) => ClientOnlyComponent) のように named export された Component を参照しようとすると、 Error: Cannot access .then on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. というランタイムエラーが発生してしまう。(App Router の場合のみの挙動の可能性が高い)

そのため、 default export を使用している。
また、 Server Component との親子関係にも注意しなければならない。server only の Component は 'use client' や dynamic import の子要素には配置できない。

余談

なぜこのようなことをする必要が出てきたかというと、 Twitter の埋め込み用のコードは script タグから読み込む必要があり、それを利用している react-twitter-embed は Client でしか動かないからである。
このあたりのコードで実装を変更している。
https://github.com/euxn23/blog-site/commit/ea644356433b0efa09864d317f281a854271db64#diff-2b91f5aaa15902f2fa3b6963cecd87f89c1ef848fdb469d06ce944179382dcb8R4-R16