Next.jsでファイルを分離せずdynamicでSSRを切る方法

publication: 2022/10/21

update:2024/02/20

Next.jsでSSRを抑止する

以下、ページコンポーネントで実装した場合の例ですが、一般のコンポーネントでも同様の使い方が可能です。

import dynamic from "next/dynamic";

const Page = () => {
    return <div>SSR無し</div>
};
export default dynamic(async () => Page, { ssr: false });

一般的なサンプルだとdynamicを使うためにファイルを分離してimportしていますが、必要なのはPromiseで返されたコンポーネントなのでこれで通ります。