https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
import { MyComp } from "../components/MyComp";
↓
import dynamic from "next/dynamic";
const MyCompNoSSR = dynamic(() => import("./MyComp"), { ssr: false });
以上で、SSRが回避されます。
import MyComp from "../components/MyComp";
↓
import dynamic from "next/dynamic";
const MyCompNoSSR = dynamic(
() => import("./MyComp").then((modules) => modules.MyComp),
{ ssr: false },
);
以上です。
このように 呼び出されるコンポーネント側に記述することもできます
import App from '../components/App'
export default function About() {
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が回避されます。
ページをリロードしてhtmlソースを見てみます。
<p>About Page</p>
がなければ、SSRされていません。
React18以上が必要です。必ずバージョンを確認しましょう
const DynamicLazyComponent = dynamic(() => import('../components/hello4'), {
suspense: true,
})
https://nextjs.org/docs/advanced-features/dynamic-import