Examples SSR Control

SSR Control

Control server-side rendering for components that need browser-only APIs. Use v-ssr=false to disable SSR when needed.

What this example shows

SSR by default

Components render on server

v-ssr=false

Client-only rendering

Browser APIs

window, navigator, etc.

Preview LiveView Vue

SsrControl.vue

<script setup lang="ts">
import { ref, onMounted } from "vue"

const isClient = ref(false)
const browserInfo = ref({
  userAgent: "Rendering on server...",
  viewport: "Rendering on server...",
  timestamp: "Rendering on server...",
})

onMounted(() => {
  isClient.value = true
  browserInfo.value = {
    userAgent: navigator.userAgent.substring(0, 80) + "...",
    viewport: `${window.innerWidth}x${window.innerHeight}`,
    timestamp: new Date().toLocaleTimeString(),
  }
})
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2 mb-3">
      <div
        :class="[
          'w-3 h-3 rounded-full transition-colors',
          isClient ? 'bg-primary' : 'bg-neutral/30'
        ]"
      />
      <span class="text-sm font-medium text-neutral">
        {{ isClient ? 'Client-side rendered' : 'Server-side rendered' }}
      </span>
    </div>

    <div class="space-y-3">
      <div class="text-xs text-neutral">User Agent:</div>
      <div class="p-3 rounded bg-base-200 border border-base-300 font-mono text-xs break-all">
        {{ browserInfo.userAgent }}
      </div>
    </div>

    <div class="grid grid-cols-2 gap-3">
      <div class="space-y-2">
        <div class="text-xs text-neutral">Viewport Size:</div>
        <div class="p-3 rounded bg-base-200 border border-base-300 font-mono text-sm text-center">
          {{ browserInfo.viewport }}
        </div>
      </div>

      <div class="space-y-2">
        <div class="text-xs text-neutral">Hydrated At:</div>
        <div class="p-3 rounded bg-base-200 border border-base-300 font-mono text-sm text-center">
          {{ browserInfo.timestamp }}
        </div>
      </div>
    </div>

    <div class="text-xs text-neutral/70 italic pt-2">
      {{ isClient
        ? 'This component has been hydrated and can now access browser APIs.'
        : 'This content was rendered on the server without access to window or navigator.'
      }}
    </div>
  </div>
</template>

How it works

1 SSR enabled by default

LiveVue components are server-side rendered by default for faster initial page loads. The component renders to HTML on the server, then Vue hydrates it on the client.

<.vue v-component="SsrControl" v-socket={@socket} />

2 Disable SSR when needed

Add v-ssr=false to skip server rendering. The component shows a placeholder during SSR and only renders on the client after hydration.

<.vue v-component="SsrControl" v-socket={@socket} v-ssr={false} />

3 Browser APIs require special handling

When using browser-only APIs like window, navigator, or document, you can either check if they exist or disable SSR entirely.

const userAgent =
  typeof window !== 'undefined'
    ? navigator.userAgent
    : 'SSR'

4 When to use v-ssr=false

Use v-ssr=false for components that heavily rely on browser APIs, third-party libraries that aren't SSR-compatible, or when the component doesn't benefit from SSR (like maps, charts, or client-only visualizations).

Next up: Slots for composable components

View example →