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'