● Next.js で dynamic import ( ssr: false ) による SSR回避（その1）

import MyComp from "../components/MyComp";

　　↓

import dynamic from "next/dynamic";
let MyComp = dynamic(() => import("../components/MyComp"), {
  ssr: false,
});

以上で、SSRが回避されます。

● Next.js で dynamic import ( ssr: false ) による SSR回避（その2）

このように記述することもできます

import App from '../components/App'

export default function About() {z
  return (
    <App>
      <p>About Page</p>
    </App>
  )
}

　　↓

import dynamic from 'next/dynamic'
import App from '../components/App'

const About = ()=> {
  return (
    <App>
      <p>About Page</p>
    </App>
  )
}

export default dynamic(() => Promise.resolve(About), {
  ssr: false
})

以上で、SSRが回避されます。

● SSR回避の確認方法

ページをリロードしてhtmlソースを見てみます。

<p>About Page</p>

がなければ、SSRされていません。

オプション With no SSR

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

オプション With suspense

React18以上が必要です。必ずバージョンを確認しましょう

const DynamicLazyComponent = dynamic(() => import('../components/hello4'), {
  suspense: true,
})

https://nextjs.org/docs/advanced-features/dynamic-import