SSR and CSR

Runable enables server-side rendering by default. Each request creates a Vue application, resolves the route, loads awaited data, and injects generated HTML into the page.

Choose the mode

// runable.config.ts
import { defineConfig } from "runable";

export default defineConfig({
  ssr: true,
});

With ssr: false, Runable serves the client template and Vue builds the interface in the browser.

Write SSR-compatible code

window, document, localStorage, and navigator do not exist on the server. Access them after mounting:

<script setup lang="ts">
const width = ref<number>();

onMounted(() => {
  width.value = window.innerWidth;
});
</script>

Isolate a client component

<ClientOnly fallback="Loading the map…" fallback-tag="p">
  <InteractiveMap />
</ClientOnly>

You can also provide a slot:

<ClientOnly>
  <Chart />

  <template #fallback>
    <ChartSkeleton />
  </template>
</ClientOnly>

The fallback is rendered on the server. Main content appears after client mounting.

Understand hydration

During SSR, Vue takes over existing HTML instead of recreating it. The first client render must therefore produce the same structure as the server. Use ClientOnly when a library cannot meet this constraint.