🔍Search
📚 Docs Menu
🌱 Get Started

ssr

Default value: true.

Implemented 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.)

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.js
 
export default {
  // Applies to all pages
  ssr: false
}

To disable SSR only for some pages:

// /pages/admin-panel/+config.js
 
export default {
  // Applies only to all pages living under /pages/admin-panel/
  ssr: false
}
# 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:

See also Render Modes (SPA, SSR, SSG, HTML-only).

See also