解決方法
Next.jsのdynamic関数を使用して、ランタイム時にContentコンポーネントを動的に読み込んでいます。
import dynamic from 'next/dynamic'
const Content = (props) => {
....
}
const DynamicContent = dynamic(
{
loader: async () => Content,
},
{ ssr: false }
)
説明
DynamicContentコンポーネントは動的に読み込まれ、ページがクライアントでレンダリングされるときにのみ読み込まれます。これにより、ページの初期読み込み時間が短縮され、パフォーマンスが向上します
loader
コンポーネントを非同期でロードする loader 関数を含むオブジェクト。
この場合、loader関数は async/await を使用してContentコンポーネントを読み込んでいます。
option
オプションの構成オブジェクト。この場合、ssr オプションは false に設定されています。
ssrオプションがfalseに設定されているため、DynamicContentコンポーネントはサーバーサイドレンダリングの際にはレンダリングされず、クライアントサイドでのみレンダリングされます。