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

Next.jsでSSRを抑止する

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

• src/pages/index.tsx

1import dynamic from "next/dynamic";
2
3const Page = () => {
4    return <div>SSR無し</div>
5};
6export default dynamic(async () => Page, { ssr: false });

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