render() hook (client-side)

The client-side render() hook exported in *.page.client.js files (usually /renderer/_default.page.client.js) 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)
}

Where:

• Page is the page's export { Page }.
• pageContext is a subset of the pageContext defined on the server-side.

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

See Render Modes and clientRouting for illustrations of conditional DOM hydration, for supporting both SPA and SSR.

SPA vs SSR

When implementing SSR, the client-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 doesn't render pageContext.Page to HTML.)

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

Multiple render() hooks

If we export { render } in /pages/star-wars.page.client.js then we define how /pages/star-wars.page.js is rendered while overriding /renderer/_default.page.client.js.

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