[Feature request]: Add ssr option to dynamic

[pveierland]

Is your feature request related to a problem? Please describe.

The dynamic feature currently does not support disabling server-side rendering. This means that any component must be renderable server-side. It would be helpful if tuono had the ssr option in the same way as Next.js where server-side rendering can be disabled for a dynamically imported component.

This would make it easier to use components like react-markdown that uses browser APIs like document directly and for which polyfills are difficult and/or not the desired approach.

Describe the solution you'd like

I'd like the dynamic function to support a second options object parameter with an ssr key which can be set to false to disable server-side rendering of a dynamically included component, see:

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

Describe alternatives you've considered

Dependencies

• yarn add react-markdown

Attempt 1: tuono.dynamic

import type { JSX } from 'react'
import { Suspense } from 'react'
import { dynamic } from 'tuono'

const Markdown: any = dynamic(() => import('react-markdown'))

export default function IndexPage(): JSX.Element {
  return (
    <Suspense>
      <Markdown>{'# Hi, *Pluto*!'}</Markdown>
    </Suspense>
  )
}

❌ Result: Server failure (no server log output)

Attempt 2: React.lazy

import type { JSX } from 'react'
import { lazy, Suspense } from 'react'

const Markdown = lazy(() => import('react-markdown'))

export default function IndexPage(): JSX.Element {
  return (
    <Suspense>
      <Markdown>{'# Hi, *Pluto*!'}</Markdown>
    </Suspense>
  )

❌ Server log: <unknown>:304616: Uncaught ReferenceError: document is not defined

Additional context

No response

[Valerioageno]

That is a great suggestion! Definitely we will address this soon!