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-ui-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-ui-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'))
}