⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

Multiple renderer/

If we have pages with substantially different rendering logic, for example different Render Modes, then we 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/_default.page.server.js
marketing/renderer/_default.page.client.js
marketing/renderer/_default.page.route.js # (Route to `/*` instead of `/marketing/*`.)

# =================
# == Admin Panel ==
# =================
admin-panel/pages/index.page.js
# Render Admin Panel as SPA
admin-panel/renderer/_default.page.server.js
admin-panel/renderer/_default.page.client.js

(We use _default.page.route.js to change the Filesystem Routing Root, see API > _default.page.route.js > filesystemRoutingRoot.)

Partial

We can also override only a subset of renderer/.

# Our "default" renderer
renderer/_default.page.server.js
renderer/_default.page.client.js

pages/some-page/index.page.js # Rendered with our default renderer

# Our Product pages need a slightly different client-side.
# We only override `_default.page.client.js` while `_default.page.server.js` stays the same.
pages/product/_default.page.client.js
pages/product/@productId.page.js
pages/product/index.page.js

Alternative: Custom Hooks

If the difference is only about data fetching, then using Custom Hooks/Exports may be a simpler solution.