There are these three examples in the nextjs docs. I am trying to determine which one I want to use and what the implications are. I have a slideout menu that is only present on mobile, and in order to reduce the initial JS bundle I have initially set it up the same way as ComponentC below. Once the slideout button is clicked, however, there is quite a noticable delay before the component even enters the DOM and the slideout component appears on screen.

Would it defeat the purpose if I lazy load the slideout on component mount or would that still help in reducing my initial page load? For example, something along the lines of this. I am not that comfortable with lazy loading so please let me know if there is a better approach to this, thanks

const Slideout = dynamic(() => import('../Slideout'))
{isMounted && <Slideout/>}
//versus checking when the slideout button has been clicked
const Slideout = dynamic(() => import('../Slideout'), { ssr: false })
{isOpen && <Slideout/>}

These are the examples from Next.js

'use client'
 
import { useState } from 'react'
import dynamic from 'next/dynamic'
 
// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
 
export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)
 
  return (
    <div>
      {/* Load immediately, but in a separate client bundle */}
      <ComponentA />
 
      {/* Load on demand, only when/if the condition is met */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>
 
      {/* Load only on the client side */}
      <ComponentC />
    </div>
  )
}