⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

meta

The meta config is part of the V1 design.

The meta config enables you to:

Create new configurations

Example:

// /renderer/+config.h.ts

import type { Config } from 'vite-plugin-ssr/types'

export default {
  meta: {
    title: {
      // Make `title` value available on both the server and client
      env: 'server-and-client'
    },
    description: {
      // Make `description` value available only on the server-side
      env: 'server-only'
    }
  }
} satisfies Config
// /pages/some-page/+config.h.js

export default {
  // Set <title>
  title: 'My vite-plugin-ssr app',
  // Set <meta name="description" />
  description: 'This app showcases using vite-plugin-ssr'
}
// /renderer/+onRenderHtml.js

export default onRenderHtml

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server'

async function onRenderHtml(pageContext) {
  // The page's config is available at pageContext.config
  const { title, description } = pageContext.config
  return escapeInject`
    <html>
      <head>
        <title>${title}</title>
        <meta name="description" content="${description}" />
      </head>
      <!-- ... -->
    </html>`
}
// /renderer/+onRenderClient.js

export default onRenderClient

async function onRenderClient(pageContext) {
  // Because meta.title.env is 'server-and-client' we can access its value
  // as well on the client-side.
  const { title } = pageContext.config
  // For client-side routing, we need to dynamically change the website's title
  document.title = title
}

Modify existing configurations

Example:

// /pages/some-page/+config.h.ts

import type { Config } from 'vite-plugin-ssr/types'

export default {
  meta: {
    onBeforeRender: {
      // By default, the onBeforeRender() hook is always loaded and executed only on the
      // server-side. By using the meta config we can make it isomorphic instead:
      // onBeforeRender() is loaded and executed as well on the cient-side.
      env: 'server-and-client'
    }
  }
} satisfies Config

Making onBeforeRender() isomorphic allows us to fetch data directly between the user's browser and the data source (without involving our SSR server). See API > .page.server.js > onBeforeRender() hook (.page.server.js) > Client Routing.

For extra convenience, we can create a onBeforeRenderIsomorph toggle:

// /pages/some-page/+config.h.ts

import type { Config, Effect } from 'vite-plugin-ssr/types'

const onBeforeRenderIsomorphEffect: Effect = ({ configDefinedAt, configValue }) {
  if (typeof configValue !== 'boolean') {
    throw new Error(`${configDefinedAt} should be a boolean`)
  }
  if (configValue === true) {
    return {
      meta: {
        onBeforeRender: {
          env: 'server-and-client'
        }
      }
    }
  }
}

export default {
  meta: {
    onBeforeRenderIsomorph: {
      env: 'config-only',
      effect: onBeforeRenderIsomorphEffect
    }
  }
} satisfies Config

Example: