Multiple `renderer/`

If you have pages with substantially different rendering logic, for example using different UI frameworks, then you may want to define multiple renderer/.

# =====================
# == Marketing Pages ==
# =====================
(marketing)/pages/index/+Page.js # /
(marketing)/pages/about/+Page.js # /about
(marketing)/pages/jobs/+Page.js # /jobs
# Render Marketing Pages as HTML-only
(marketing)/renderer/+onRenderHtml.js
(marketing)/renderer/+onRenderClient.js
(marketing)/+config.js # (Route to `/*` instead of `/marketing/*`.)
 
# =================
# == Admin Panel ==
# =================
admin-panel/pages/index/+Page.js
# Render Admin Panel as SPA
admin-panel/renderer/+onRenderHtml.js
admin-panel/renderer/+onRenderClient.js

We call such structure a domain-driven file structure.

Partial

You can also override only a subset of renderer/.

# Default renderer
renderer/+onRenderHtml.js
renderer/+onRenderClient.js
 
pages/some-page/index/+Page.js # Rendered with the default renderer
 
# Product pages need a slightly different client-side.
# Only override onRenderClient() while onRenderHtml() stays the same.
pages/product/+onRenderClient.js
pages/product/@productId/+Page.js
pages/product/index/+Page.js

Multiple renderer/

Partial

Multiple `renderer/`