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.
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).
render()
hooksIf 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/
.