# SSR

> Setup needed for server rendering.

## Kbd

`<Kbd>` shows ⌘ on Apple devices and Ctrl elsewhere. Nuxt works out which from the request. In Vue, pass it per request:

```ts
import { createUi, platformFrom } from "@humanonlyweb/ui";
import { createSSRApp } from "vue";

const app = createSSRApp(App).use(
  createUi({ platform: platformFrom(request.headers.get("user-agent")) }),
);
```

Without it, `<Kbd>` shows Ctrl until the page has loaded.

If you cache rendered pages, the cached copy keeps the first visitor's platform. Vary the cache on `Sec-CH-UA-Platform` (or `User-Agent`), or leave `platform` out on cached routes so the browser works it out.

## Multiple apps

Two Vue apps on one page need different `app.config.idPrefix` values, so their generated ids don't clash.