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).

Routing > Server Routing VS Client Routing helps us choose which one to use.

React Router / Vue Router

Instead of using React Router or Vue Router, we recommend to only use vite-plugin-ssr's built-in router.

That said, vite-plugin-ssr has support for both Vue Router and React Router, see Routing > Vue Router & React Router.

Route Strings & Route Functions

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

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

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

// /pages/

// This file defines the route of `/pages/`

// 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/

// This file defines the route of `/pages/product/`

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: