support next.js dynamic component

[y-nk]

I'd just think it'd be nice if we could eventually use next/dynamic into the route definition array. For now, the type aren't matching so we can't do:

const routes = [{
  path: '/',
  element: dynamic(() => import('~/pages/Home'), { ssr: false })
}]

the way to work around it is:

const Home = dynamic(() => import('~/pages/Home'), { ssr: false })

const routes = [{
  path: '/',
  element: <Home />
}]

which i think is a bit cumbersome.

PS: i also asked Next to support a component mode for their dynamic which at the moment is not permitted → vercel/next.js#52236

[ivan-kleshnin]

Have you tried native React.lazy https://react.dev/reference/react/lazy ? Has to be combined with remix-utils/client-only to move it outside SSR.

import {lazy} from "react"
import {ClientOnly} from "remix-utils/client-only"

export let ApexChart = lazy(() => import("./ApexChart"))

export function YourComponent() {
  return <ClientOnly>
    {() => <ApexChart/>}
  </ClientOnly>
}