⚠️
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.

export { Page }

The .page.js files can have a export { Page } which represents the page's root (React/Vue/...) component.

vite-plugin-ssr doesn't do anything with Page and just makes it available at pageContext.Page:

// /pages/hello.page.js
// Environment: browser and server

export { Page }

// We export a JSX component, but we can export anything we want since vite-plugin-ssr doesn't
// do anything with `Page`: it just makes it available at `pageContext.Page`.
function Page() {
  return <>Hello</>
}
// /renderer/_default.page.server.js
// Environment: server

export { render }

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr/server'
import renderToHtml from 'some-ui-framework'

async function render(pageContext) {
  // `Page` is available at `pageContext.Page`
  const { Page } = pageContext
  const pageHtml = await renderToHtml(Page)

  return escapeInject`<html>
    <body>
      <div id="root">
        ${dangerouslySkipEscape(pageHtml)}
      </div>
    </body>
  </html>`
}
// /renderer/_default.page.client.js
// Environment: browser

export { render }

import { hydrateDom } from 'some-ui-framework'

async function render(pageContext) {
  // `pageContext.Page` is also available in the browser.
  const { Page } = pageContext
  await hydrateDom(Page, document.getElementById('root'))
}