render() hook (client-side)

The client-side render() hook exported in *.page.client.js files (usually /renderer/ defines how a page is rendered/hydrated on the browser-side.

// *.page.client.js
// Environment: Browser

import { renderToDom, hydrateDom } from 'some-ui-framework'

export { render }

async function render(pageContext) {
  const { Page } = pageContext

  // SPA:
  await renderToDom(Page)

  // SSR:
  await hydrateDom(Page)


We use passToClient to determine what subset of pageContext is sent to the browser.


When implementing SSR, the cient-side render() hook works in tandem with the server-side render() hook: the server-side render() hook renders the page to HTML and the client-side render() hook hydrates the HTML.

When implementing an SPA, then the client-side render() hook is solely responsible for rendering the page. (There is still a server-side render() hook but it only renders the HTML shell; it doens't render pageContext.Page to HTML.)

See Guides > Render Modes (SPA, SSR, SSG, HTML-only).

Multiple render() hooks

If we export { render } in /pages/ then we define how /pages/ is rendered while overriding /renderer/

And, defining multiple render() hooks, with multiple* files, enables us to define different rendering for different pages. See Multiple renderer/.