`+stream`

boolean | 'web' | 'node'

Default: false (or true if using a Vike extension that requires streaming)

Requires: ssr: true

Local

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

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

The stream setting allows you to:

Enable or disable HTML Streaming.
Specify the stream type (either a Node.js Stream or a Web Stream).

What is HTML Streaming? If you're unfamiliar with HTML streaming then check out this explanation of SSR, HTML streaming, and Progressive Rendering. Although it explains it in the context of React, we also recommend reading it if you use a UI framework other than React.

// /pages/+config.js
 
export default {
  // Enable HTML Streaming. Let Vike extensions decide whether to use a Node.js or Web stream.
  stream: true,
  // Enable HTML Streaming. Force the stream to be a Web Stream.
  stream: 'web',
  // Enable HTML Streaming. Force the stream to be a Node.js Stream.
  stream: 'node'
}

// /pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // Enable HTML Streaming. Let Vike extensions decide whether to use a Node.js or Web stream.
  stream: true,
  // Enable HTML Streaming. Force the stream to be a Web Stream.
  stream: 'web',
  // Enable HTML Streaming. Force the stream to be a Node.js Stream.
  stream: 'node'
} satisfies Config

Why doesn't it seem to work? If you enable HTML Streaming but the HTML is still sent all at once, note that:

The +data hook doesn't trigger HTML Streaming — the +data hook applies to the whole page and is fully awaited before rendering starts. A slow +data hook still results in the HTML being sent all at once. To see HTML streaming in action, use a Vike extension like vike-react-query/vike-vue-query/vike-solid-query (and the upcoming Telefunc integrations such as vike-react-telefunc).

By default, HTML streaming is disabled for bots. For example, the User-Agent header sent by curl is interpreted as a bot. See react-streaming > Bots.

Inheritance

Enable for all your pages:

// /pages/+config.js
 
// This config applies to all pages (/pages/**).
export default {
  stream: false
}

// /pages/+config.ts
 
import type { Config } from 'vike/types'
 
// This config applies to all pages (/pages/**).
export default {
  stream: false
} satisfies Config

Enable only for some pages:

// /pages/admin/+config.js
 
/* This config applies only to admin pages (/pages/admin/**) such as:
   FILESYSTEM                            URL
   /pages/admin/+Page.js                 /admin
   /pages/admin/user/@id/+Page.js        /admin/user/@id
   /pages/admin/product/@id/+Page.js     /admin/product/@id
*/
export default {
  stream: false
}

// /pages/admin/+config.ts
 
import type { Config } from 'vike/types'
 
/* This config applies only to admin pages (/pages/admin/**) such as:
   FILESYSTEM                            URL
   /pages/admin/+Page.ts                 /admin
   /pages/admin/user/@id/+Page.ts        /admin/user/@id
   /pages/admin/product/@id/+Page.ts     /admin/product/@id
*/
export default {
  stream: false
} satisfies Config

For better config organization, you can use page groups.

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

In case you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, you can:

Integrate HTML streaming yourself, see HTML Streaming.
Implement the stream setting yourself by using meta. Examples:

+stream

Inheritance

Without vike-{react,vue,solid}

See also

`+stream`

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