¿Cuál es la diferencia entre el componente importado dinámico con ssr: true :
const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), { ssr: true, });y solo la importación normal de componentes:
import { Button } from './Button';showButton es false , ¿todavía DynamicButton y dónde? // jsx return showButton && <DynamicButton />Cuando se usa una importación de componentes regular, Next.js empaqueta el código del componente junto con el resto de los componentes para una ruta determinada. Esto generalmente significa que termina con una gran parte que contiene todos los códigos de los componentes para cada ruta.
next/dynamic con ssr: true Cuando se usa next/dynamic con ssr: true , Next.js divide el código del componente en un fragmento separado (división de código) y carga ese fragmento por separado (carga diferida).
Esto significa que para el escenario que describiste:
return showButton && <DynamicButton /> El componente DynamicButton solo se carga cuando showButton es verdadero. Esto tiene la ventaja de reducir la cantidad de JavaScript que se carga en la carga de la página inicial.
next/dynamic con ssr: false Al usar next/dynamic con ssr: false , también se aplican todos los beneficios anteriores de la importación dinámica. Sin embargo, el código del componente no se precargará en el servidor y solo se ejecutará en el cliente. Esto suele ser útil cuando el componente incluye una biblioteca o API que solo funciona en el navegador.