Server side rendering

Radix Primitives can be rendered on the server.

Overview

Server side rendering or SSR, is a technique used to render components to HTML on the server, as opposed to rendering them only on the client.

Static rendering is another similar approach. Instead it pre-renders pages to HTML at build time rather than on each request.

You should be able to use all of our primitives with both approaches, for example with Nuxt.js.

Nuxt Hydration issue (Vue < 3.5)

Radix Vue offers a Nuxt module that supports auto importing components. However, if you are using Vue < 3.5, minor hydration issues might arise because as of vue <= 3.4 there is currently no way to ensure consistent DOM element id between the client and server renders. This is something that Radix Vue relies on.

As a temporary workaround, we expose a way to allow Nuxt (with version > 3.10) inject it's useId implementation to radix-vue.

To provide a custom useId implementation, please follow this guide.