SolidStart client side only rendering

Question

Is there any way to render a component on the client side only in Solid Start.

Just like in next js we can use dynamic to get ssr false. Is there any alternative for that in SolidJS?

I tried to import module in createEffect.

Answer 1

There is an experimental API unstable_clientOnly exported from solid-start:

On the server it will render null or will render the fallback if you pass it any. This can help avoid layout shifts.

https://github.com/solidjs/solid-start/issues/320

It uses isServer from solid-js/web internally:

This indicates that the code is being run as the server or browser bundle. As the underlying runtimes export this as a constant boolean it allows bundlers to eliminate the code and their used imports from the respective bundles.

https://www.solidjs.com/docs/latest/api#isserver

Answer 2

Just found clientOnly https://docs.solidjs.com/solid-start/reference/client/client-only

Wrapping components in clientOnly will cause them render only in the client. This can useful for components that interact directly with the DOM, such as jQuery, since they can not render on the server. It works similar to lazy but will only render after hydration and will never load on the server.

It's preferred than lazy because lazy still causes the server to import it