`pageContext`

Built-in

pageContext.Page: the export { Page } or export default of the page's .page.js file.
pageContext.pageExports: all exports of the page's .page.js file.
pageContext.routeParams: the route parameters. (E.g. pageContext.routeParams.movieId for a page with a Route String /movie/:movieId.)
pageContext.isHydration [Only when using Client Routing and only in the browser]: boolean that is true if the current page is already rendered to HTML. (Usually: true for the first page the user navigates to and false when the user navigates to a new page.)
pageContext.url: The url we passed at the server middleware.
```
const renderPage = createPageRenderer(/*...*/)
// Server middleware
app.get('*', async (req, res, next) => {
  const pageContextInit = {}
  // `pageContext.url` is defined here
  pageContextInit.url = req.url
  const result = await renderPage(pageContextInit)
  /* ... */
})
```
When using Client Routing, the value of pageContext.url in the browser is the current URL. (Either window.location.href, or the href value of the <a href="/some/url"> link the user clicked on, or the value passed to navigate('/some/url'), or the URL of the browser's back/forward history navigation.)
pageContext.urlPathname: the URL's pathname. (E.g. /product/42 if pageContext.url === 'https://example.com/product/42?details=yes#reviews').

pageContext.urlParsed: URL information:

{
  origin: null | string
  pathname: string
  search: Record<string, string>
  hash: string
}

For example:

// https://example.com/product/42?details=yes#reviews
{
  origin: 'https://example.com',
  pathname: '/product/42',
  search: { details: 'yes' },
  hash: 'reviews'
}

It also provides lower-level infos (which you'll likely not need).

{
  pathnameWithBaseUrl: string
  hasBaseUrl: boolean // (Almost always `true`)
  searchString: null | string
  hashString: null | string
}

For example, if we want the ordered list of all search parameter values, we can use new URLSearchParams(pageContext.urlParsed.searchString || '').

Custom

In addition to the built-in pageContext values set by vite-plugin-ssr, we can define custom pageContext values at:

Hooks: onBeforeRender() and render().

export function onBeforeRender() {
  return {
    pageContext: {
      // We can define some custom `pageContext` here
    }
  }
}

export function render() {
  return {
    documentHtml: escapeInject`<html><!--...--></html>`,
    pageContext: {
      // We can define some custom `pageContext` here
    }
  }
}

Server middleware.

const renderPage = createPageRenderer(/*...*/)
// Server middleware
app.get('*', async (req, res, next) => {
  const pageContextInit = {
    url: req.url,
    // We can define some custom `pageContext` here
  }
  const pageContext = await renderPage(pageContextInit)
  /* ... */
})

Browser

When using Server Routing, the following is available in the browser:

pageContext.Page
pageContext.pageExports

When using Client Routing, the following is available in the browser:

pageContext.Page
pageContext.pageExports
pageContext.isHydration
pageContext.routeParams
pageContext.url
pageContext.urlPathname
pageContext.urlParsed

All other pageContext are only available in Node.js by default: we use passToClient to make more pageContext available in the browser.

TypeScript

TypeScript utility types:

// Server-side `pageContext` built-in values
import type { PageContextBuiltIn } from 'vite-plugin-ssr'

// Client-side `pageContext` built-in values, when using Server Routing
import type { PageContextBuiltInClient } from 'vite-plugin-ssr/client'

// Client-side `pageContext` built-in values, when using Client Routing
import type { PageContextBuiltInClient } from 'vite-plugin-ssr/client/router'

✍ Edit this page