🐙

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

2022/10/24に公開約400字

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

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で返されたコンポーネントなのでこれで通ります。

GitHubで編集を提案

Discussion

ログインするとコメントできます