Load heavy code on useLoad heavy code on use

Monaco in the main chunk

Load both, then click Open editor before each hydrates.

import dynamic from 'next/dynamic'

const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false, loading: () => <EditorSkeleton /> }
)

function CodePanel({ code }: { code: string }) {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open editor</button>
      {open && <MonacoEditor value={code} />}
    </>
  )
}

A feature most leave off

Toggle each switch on, off, then on again.

function AnimationPlayer() {
  const [enabled, setEnabled] = useState(false)
  const [frames, setFrames] = useState<Frame[] | null>(null)

  useEffect(() => {
    if (enabled && !frames && typeof window !== 'undefined') {
      import('./animation-frames.js')
        .then(mod => setFrames(mod.frames))
        .catch(() => setEnabled(false))
    }
  }, [enabled, frames])

  return (
    <>
      <Switch checked={enabled} onCheckedChange={setEnabled} />
      {enabled && (frames ? <Canvas frames={frames} /> : <Skeleton />)}
    </>
  )
}

Analytics after hydration

Drag the third-party size, then Replay.

import dynamic from 'next/dynamic'

const Analytics = dynamic(
  () => import('@vercel/analytics/react').then(m => m.Analytics),
  { ssr: false }
)

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Why it matters, pros and cons