render() hook (client-side)

在 *.page.client.js 文件（通常是 /renderer/_default.page.client.js）中导出的客户端 render() hook 定义了页面是如何在浏览器端渲染/hydrated

// *.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)
}

在此：

• Page 是 page 的 export { Page }
• pageContext 是在服务端定义的 pageContext 的子集

我们使用 passToClient 来确定将 pageContext 的哪个子集发送到浏览器

SPA vs SSR

实现 SSR 时，客户端 render() hook 与 服务端 render() hook 协同工作：服务器端 render() hook 将页面渲染为 HTML，客户端 render() hook hydrates HTML

实现 SPA 时，客户端的 render() hook 仅负责渲染页面。（仍然有一个服务端的 render() hook，但它只渲染 HTML shell；它不会将 pageContext.Page 渲染为 HTML。）

请参考 指南 > Render Modes (SPA, SSR, SSG, HTML-only)

多个 render() hooks

如果我们在 /pages/star-wars.page.client.js 中 export { render } 那么我们需要定义 /pages/star-wars.page.js 在覆盖 /renderer/_default.page.client.js 时如何渲染

并且，使用多个 _default.page.* 文件定义多个 render() 钩子，使我们能够为不同的页面定义不同的渲染。 请参阅 Multiple renderer/