⚠️
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.

Routing

With vite-plugin-ssr we have the choice between:

  • Server Routing and Client Routing.
  • Filesystem Routing, Route Strings and Route Functions.

Server Routing or Client Routing?

vite-plugin-ssr has first-class support for both Server-side Routing (full HTML reload upon page navigation) and Client-side Routing (DOM mutations upon page navigation).

The guide Server Routing VS Client Routing helps you choose which one to use.

Route Strings & Route Functions

By default, vite-plugin-ssr does Filesystem Routing:

FILESYSTEM                        URL
pages/index.page.js               /
pages/about.page.js               /about
pages/faq/index.page.js           /faq
pages/movie/@id/index.page.js     /movie/1, /movie/2, /movie/3, ...

We can also define so-called "Route Strings" and "Route Functions".

// /pages/product.page.route.js

// This file defines the route of `/pages/product.page.js`

// Route String
export default '/product/@productId'

The parameter productId is available at pageContext.routeParams.productId.

Route Functions give us full programmatic flexibility to implement advanced routing logic, for example route guards:

// /pages/product/edit.page.route.js

// This file defines the route of `/pages/product/edit.page.js`

import { resolveRoute } from 'vite-plugin-ssr/routing'

export default async (pageContext) => {
  // Ensure that `/product/@id/edit` can be accessed only by admins
  if (!pageContext.user.isAdmin) {
    return false
  }

  // We can use vite-plugin-ssr's Route String resolver
  return resolveRoute('/product/@id/edit', pageContext.urlPathname)
}

See also:

React Router / Vue Router

We recommend using vite-plugin-ssr's built-in router instead of React Router and Vue Router. See Vue Router & React Router.