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.

SPA vs SSR

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/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/.