Next/dynamic vs React.lazy_

[jorge]

Is there a difference in performance or any other caveat between using

module Ui = {
  let make = React.lazy_(() => Js.import(PWindow_ui.make))
}

versus

// this is JS but I would bind it to ReScript
import dynamic from 'next/dynamic'
 
// Client Components:
const ComponentA = dynamic(() => import('../components/A'))

See also
Using dynamic imports in NextJS

Next.js + dynamic imports: server and client markup mismatch

Hunted down this little bitch lol The problem was that for some reason each dynamic loader needs own options object. This triggers warning: open Next.Dynamic let options = options(~loading=() => <Spinner />, ()) let items = [ dynamic(() => import("posts/foo.mdx"), options), dynamic(() => import("posts/bar.mdx"), options), ] But this does not: open Next.Dynamic let options = () => options(~loading=() => <Spinner />, ()) let items = [ dynamic(() => import("posts/foo.mdx"), options()…

Optimizing: Lazy Loading | Next.js

[jorge]

seems we should use next/dynamic when using Nextjs and targetting both SSR and Client.

React.lazy_ when is only Client-side