`export { Page }`

A .page.js file has export { Page } (or export default 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:

// hello.page.js
// Environment: Browser, Node.js

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: Node.js

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr'
import renderToHtml from 'some-view-framework'

export { render }

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

import { getPage } from 'vite-plugin-ssr/client'
import { hydrateToDom } from 'some-view-framework'

hydrate()

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

✍ Edit this page