onRenderClient()
hook
Environment: client.
The onRenderClient()
hook defines how pages are hydrated and rendered on the client-side.
The onRenderClient()
and onRenderHtml()
hooks are essentially the glue code between Vike and the UI framework (React/Vue/Solid/...).
If you use a UI framework Vike extension
vike-react
/vike-vue
/vike-solid
, then you don't need to defineonRenderClient()
as it's already defined byvike-react
/vike-vue
/vike-solid
.
Where:
pageContext.Page
is thePage
value of the page that is being rendered, see API ><Page>
.pageContext
is a subset of thepageContext
defined on the server-side.
You can use passToClient
to determine what subset of pageContext
is sent to the browser.
See Render Modes (SPA, SSR, SSG, HTML-only) and Client Routing for illustrations of conditional DOM hydration, for supporting both SPA and SSR.
SPA vs SSR
When implementing SSR, the client-side onRenderClient()
hook works in tandem with the
server-side onRenderHtml()
hook: the server-side onRenderHtml()
hook renders the page to HTML and the client-side onRenderClient()
hook hydrates the
HTML.
When implementing an SPA, then the client-side onRenderClient()
hook is solely responsible for rendering the page.
(There is still a server-side onRenderHtml()
hook but it only renders the HTML shell; it doesn't render
pageContext.Page
to HTML.)
See Render Modes (SPA, SSR, SSG, HTML-only).
Multiple onRenderClient()
hooks
If you create /pages/star-wars/+onRenderClient.js
then you define how /pages/star-wars/+Page.js
is rendered while overriding the global onRenderClient()
hook.
By defining multiple onRenderClient()
hooks, you can define different renderings for different pages. See Multiple renderer/
.