フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または yarn create next-app <アプリ名> または bun create next-app <アプリ名> )

Next.js でdynamic import ( ssr: false ) による SSR回避 ( hydration error 回避など)

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

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

・export default の場合

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

  ↓

import dynamic from "next/dynamic";

const MyCompNoSSR = dynamic(() => import("./MyComp"), { ssr: false });

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

・named export の場合

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

  ↓

import dynamic from "next/dynamic";

const MyCompNoSSR = dynamic(
  () => import("./MyComp").then((modules) => modules.MyComp),
  { ssr: false },
);

以上です。

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

このように 呼び出されるコンポーネント側に記述することもできます

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が回避されます。

● 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

No.2158
03/14 11:02

edit