`+ssr`

boolean

Default: true

Local

Provided by: vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use the ssr setting. If you don't use vike-react/vike-vue/vike-solid then see Without vike-{react,vue,solid}.

Setting to enable/disable Server-Side Rendering (SSR). You can disable SSR for all your pages or only for some pages.

What is SSR? If you're unfamiliar with SSR then check out Dan Abramov's explanation of SSR, HTML Streaming, and Progressive Rendering. (While it explains it in the context of React, we still recommend reading it if you use a UI framework other than React.)

See SPA vs SSR (and more) for a guide on whether to use SSR or not.

Alternatively:

You can use clientOnly() to render and load some components only on the client-side while rendering the rest of the page with SSR.

You can pre-render some of (or all) your pages.

To disable SSR for all your pages:

// /pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // Applies to all pages
  ssr: false
} satisfies Config

To disable SSR only for some pages:

// /pages/admin-panel/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // Applies only to all pages living under /pages/admin-panel/
  ssr: false
} satisfies Config

# Pages rendered and loaded only on the client-side
/pages/admin-panel/products/+Page.js
/pages/admin-panel/users/+Page.js
 
# Pages rendered and loaded on both client- and server-side. (Because they
# don't live under /pages/admin-panel/ thus the `ssr` setting doesn't apply.)
/pages/index/+Page.js
/pages/about/+Page.js

For an improved file and config organization, you can consider using a domain-driven file structure.

Without `vike-{react,vue,solid}`

In case you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, you can implement the ssr setting yourself.

Examples:

+ssr

Without vike-{react,vue,solid}

See also

`+ssr`

Without `vike-{react,vue,solid}`