Search
Docs Menu
API
Get Started
Blog
Edit

getPageContext()

Usually, the pageContext object can be access via usePageContext() or Vike hook arguments.

But in rare cases, there isn't any straightforward way to access the pageContext object. You can then use getPageContext().

// Environment: server, client
 
import { getPageContext } from 'vike/getPageContext'
 
function anywhere() {
  const pageContext = getPageContext({ asyncHook: true })
}

When setting asyncHook: true, Vike uses its internal async hook to access the pageContext object on the server. This guarantees pageContext access anywhere, as long as getPageContext() is called from a stack trace originating from the SSR HTTP request.

⚠️

Use getPageContext({ asyncHook: true }) only as last resort, because some deployment platforms don't support async hooks. (Such as using Cloudflare without nodejs_compat for maximum efficiency.)

Always prefer and first try using usePageContext() or Vike hook arguments before using getPageContext({ asyncHook: true }).

Using getPageContext() without asyncHook: true has limited value. Its only use case is enabling extensions to create so-called universal hooks — if you aren't building a Vike extension, then getPageContext() without asyncHook: true is most likely useless for you.

Use case: instrumentation

The most common use case for getPageContext({ asyncHook: true }) is instrumentation.

Collecting logs is usually done by monkey patching console.log() — using getPageContext({ asyncHook: true }) is the only practical way for accessing the pageContext object.

Use case: universal hook

getPageContext()

Using getPageContext() (without asyncHook: true) allows you to access the pageContext object inside Vike hooks without accessing the pageContext argument.

For example:

// /pages/some-page/+data.js
 
export { data }
 
import { getPageContext } from 'vike/getPageContext'
 
// Note how we don't use the pageContext argument of +data
function data() {
  const pageContext = getPageContext()
 
  // ...
}
// /pages/some-page/+data.ts
 
export { data }
export type Data = Awaited<ReturnType<typeof data>>
 
import { getPageContext } from 'vike/getPageContext'
 
// Note how we don't use the pageContext argument of +data
function data() {
  const pageContext = getPageContext()
 
  // ...
}

It's the same object than the function data(pageContext) argument and the following is equivalent:

// /pages/some-page/+data.js
 
export { data }
 
import { getPageContext } from 'vike/getPageContext'
 
function data() {
 const pageContext = getPageContext()
function data(pageContext) {
  // ...
}
// /pages/some-page/+data.ts
 
export { data }
export type Data = Awaited<ReturnType<typeof data>>
 
import { getPageContext } from 'vike/getPageContext'
import type { PageContextServer } from 'vike/types'
 
function data() {
 const pageContext = getPageContext()
function data(pageContext: PageContextServer) {
  // ...
}

You may ask yourself what the purpose of getPageContext() is and, indeed, it's useless for Vike users.

It's only useful for implementing a Vike extension that exports a universal hook.

Universal hook

A universal hook (e.g. useConfig()) is a component hook that also works inside Vike hooks.

// /components/SomeUiComponent.jsx
 
import { useConfig } from 'vike-react/useConfig' // or vike-{vue,solid}
 
function SomeUiComponent() {
  // useConfig() can be used inside a UI component, and ...
  const config = useConfig()
}
 // /components/SomeUiComponent.tsx
 
import { useConfig } from 'vike-react/useConfig' // or vike-{vue,solid}
 
function SomeUiComponent() {
  // useConfig() can be used inside a UI component, and ...
  const config = useConfig()
}
// /pages/some-page/+data.js
 
import { useConfig } from 'vike-react/useConfig'
 
export function data() {
  // ... can also be used inside a Vike hook.
  const config = useConfig()
}
 // /pages/some-page/+data.ts
 
import { useConfig } from 'vike-react/useConfig'
 
export function data() {
  // ... can also be used inside a Vike hook.
  const config = useConfig()
}

Example

This is how useConfig() is made a universal hook using getPageContext():

// node_modules/vike-{react,vue,solid}/dist/hooks/useConfig.js
 
import { usePageContext } from './usePageContext'
import { getPageContext } from 'vike/getPageContext'
 
export function useConfig() {
  // useConfig() needs to access the pageContext object
 
  // If useConfig() is used inside a Vike hook
  let pageContext = getPageContext()
 
  // If useConfig() is used inside a React/Vue/Solid component
  if (!pageContext) {
    pageContext = usePageContext()
  }
 
  // ...
}

See also