Use dynamic imports for heavy client components | BeforeMerge Rules | BeforeMerge

Use dynamic imports for heavy client components | BeforeMerge Rules | BeforeMerge

Why This Matters

next/dynamic with ssr: false ensures heavy client components are:

Code-split — loaded as a separate chunk
Lazy loaded — only when the component mounts
Server-safe — won't break SSR

Good

import dynamic from "next/dynamic"
 
const MarkdownEditor = dynamic(
  () => import("./markdown-editor"),
  { loading: () => <Skeleton />, ssr: false }
)