SSR with SolidStart / Solid

Shaders uses WebGPU, which requires a browser environment and cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled Solid applications.

clientOnly (SolidStart)

SolidStart provides a clientOnly utility that defers a component entirely to the client. This is the recommended approach:

// components/MyShader.jsx
import { Shader, LinearGradient } from 'shaders/solid'

export default function MyShader() {
  return (
    <Shader class="w-full h-64">
      <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
    </Shader>
  )
}

// routes/index.jsx
import { clientOnly } from '@solidjs/start'

const MyShader = clientOnly(() => import('../components/MyShader'))

export default function Page() {
  return (
    <main>
      <MyShader />
      <h1>Your content</h1>
    </main>
  )
}

clientOnly wraps the component in a Suspense boundary and only renders it in the browser — it returns null during SSR.

isServer guard

For finer control, check isServer from solid-js/web:

import { isServer } from 'solid-js/web'
import { Shader, LinearGradient } from 'shaders/solid'

export default function MyShader() {
  if (isServer) return null

  return (
    <Shader class="w-full h-64">
      <LinearGradient />
    </Shader>
  )
}

onMount guard

Alternatively, use onMount with a signal to defer rendering until the component is mounted in the browser:

import { createSignal, onMount } from 'solid-js'
import { Shader, LinearGradient } from 'shaders/solid'

export default function MyShader() {
  const [mounted, setMounted] = createSignal(false)

  onMount(() => setMounted(true))

  return (
    <div class="w-full h-64">
      {mounted() && (
        <Shader class="w-full h-64">
          <LinearGradient />
        </Shader>
      )}
    </div>
  )
}

Solid (without SolidStart)

In a Solid app without SolidStart, the onMount approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.