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

こちらでも同じ記事を書いています。

Next.jsでSSRを抑止する

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

• src/pages/index.tsx

import dynamic from "next/dynamic";

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

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