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

I haven't tried it, but window is not defined on the server, so

if (typeof window !== 'undefined') { console.log("I run on the client") }

Answer 3

For those still finding this, the api has evolved and lazy loading has been added. Any lazy loaded component will be fetched and loaded only when needed. Here is solid lazy:

https://www.solidjs.com/tutorial/async_lazy?solved

If you want to lazy load name imports, then here is a wrapper lib that handles that:

https://github.com/JLarky/solidjs-lazily

Note: this is also important to utilize with soild-start sometimes because solid-start requires several different export types in a lib module so that the different phases of the SSR can render in different ways at different points in the process. Lots of lib that exist today will not export to all the needed types and therefore solid-start SSR can't handle them. So, for simpler libs and modules that you want to import, sometimes you are forced to lazy load them because that forces them to load on the client only which is the most common export types for non-solid-start focused lib/modules that exist. Lazy loading will open you up to a wider range of options when looking for a lib to do some random functionality you want in your solid-start apps.