Vike vs. (SSRx + TanStack Router) - a feature comparison
Tags: javascript, vite, webdev, ssr
Published: 2024-03-14 10:31:39

Let's compare two options to how we can achieve SSR with Vite. Either using Vike (aka. vite-plugin-ssr), or using SSRx with TanStack Router. We'll also inspect how good they are with respect to [cross-platform development](https://dev.to/this-is-learning/the-different-strategies-to-building-a-cross-platform-app-3p56) (web, and mobile with iOS and Android), specifically their compatibility with Expo for React Native.

Both options offer:

- [WinterCG](https://wintercg.org/faq) standard focus (Fetch API, Request/Response).
- Hot-Module Reloading (HMR) on client (Vite default) AND server (Code splitting and bundling (Vite default?)
  - Asset preloading
- Pre-rendering,
- HTML Streaming.
- No API routes
- HMR support on the client AND server
- Filesystem Routing
- Route functions before loading a page (f.ex. useful for auth).
  - Vike has:
    - a page specific [Route String](https://vike.dev/route-string)
      defined in an adjacent file to each page.
    - global [Route Functions](https://vike.dev/route-function) that [all ](https://vike.dev/route-function#lightweight-fast)run before every page ([async forbidden](https://vike.dev/route-function#async)). [Note](https://vike.dev/route-function#lightweight-fast) that: A heavy route function would slow down the entire app.
  - TanStack Router has [beforeLoad](https://tanstack.com/router/v1/docs/guide/data-loading#using-route-context) function for each page (which is [async](https://tanstack.com/router/v1/docs/api/router/RouteOptionsType#beforeload)).  
      
With both:
- If combining pre-rendering (SSG) + PWA, then must ensure that the execution order of Vite plugins doesn’t [mess things up](https://github.com/vite-pwa/vite-plugin-pwa/issues/258).  

---    

# Option 1: Vike


## Vike offers uniquely:

- Opinionated / own filesystem routing convention
- Integrated Routing: Client Routing and/or Server Routing.
  - Pages…
  - Domain driven
  - Base URL
  - **Deploy sync, for old clients**
- Data fetching (passes context obj to client)
- Layouts
- **i18n**
- **Link Prefetching**
- All render modes: SSR, SPA/CSR, MPA, SSG, HTML-only. Each page can use a different mode/config.
  - Route Functions before render, for each page
- RSC, [partially](https://vike.dev/react#react-server-components)
  - No Server Actions, but Telefunc
- Hooks into page lifecycle, many specific hooks
  https://vike.dev/hooks
    
## Currently missing in Vike:

- Single Route File: <https://github.com/vikejs/vike/issues/341>
- Customizable Filesystem Routing (provide the pattern used to interpret file and folder structure):
  - Needed for **compatibility with Expo Router**: [#1#discussioncomment-3978947](https://github.com/expo/router/discussions/1#discussioncomment-3978947)
  - “Not a priority at the moment”: [#341#issuecomment-1842659376](https://github.com/vikejs/vike/issues/341#issuecomment-1842659376)
  - Maybe similar to: [API](https://vitejs.github.io/vite-plugin-react-pages/advanced-fs-routing)
- Typesafe links: [#341](https://github.com/vikejs/vike/issues/341)
- Clearer file naming in file system routing: [#1322](https://github.com/vikejs/vike/issues/1322)
    
---

# Option 2: SSRx + TanStack Router


## SSRx offers uniquely:
- Can be combined with any client side
- Single Route File
- Typescript support
  - Typesafe context object used across client and server
- Uses [radix3 router](https://github.com/unjs/radix3) on the server for assets by default. So it [expects](https://github.com/marbemac/ssrx/blob/93327cea8f2ce3cc38307088c02e7d38d41d1375/packages/vite/src/default-router-adapter.ts#L24) route paths to be defined in a format that conforms radix3’s expectations.
  - (Using a [RegExpRouter](https://hono.dev/concepts/routers#regexprouter) could be faster than [using radix3](https://github.com/marbemac/ssrx/blob/93327cea8f2ce3cc38307088c02e7d38d41d1375/packages/vite/src/runtime/assets.server.ts#L4)…)
- Hook into page lifecycle on client and server (own plugin system). 

## TanStack Router (TSR) offers uniquely:

- Filesystem Routing with type safety ([with codegen](https://tanstack.com/router/v1/docs/api/router-cli) or [with
  Vite](https://tanstack.com/router/v1/docs/api/router-vite-plugin)), also with [SSR](https://tanstack.com/router/v1/docs/guide/ssr)
  - Type safe URLs (no more broken links)
  - Mix folder or flat structure
  - Config in route file or [separate files](https://x.com/tannerlinsley/status/1745511342747082953) (using codesplitting, like Vike)

- Search params powerful

- Hooks into page loading lifecycle

- [Router Cache](https://tanstack.com/router/v1/docs/guide/data-loading#to-router-cache-or-not-to-router-cache) (built-in SWR Caching, a long-term in-memory caching layer for route loaders. )  

## Currently missing with the SSRx + TanStack Router combo:

- Hooks in SSRx:

  - for when SSR is completed:
    <https://github.com/marbemac/ssrx/blob/main/packages/renderer/src/types.ts>

  - more hooks, to have more power

    - BUT TanStack Router has [route loading lifecycle
      hooks](https://tanstack.com/router/v1/docs/guide/data-loading#the-route-loading-lifecycle)
      like [beforeLoad](https://tanstack.com/router/v1/docs/api/router/RouteOptionsType#beforeload)
      and [loader](https://tanstack.com/router/v1/docs/api/router/RouteOptionsType#loader)
      hooks for individual pages.

- i18n in SSRx

- Link prefetching (in SSRx or [another data fetching library](https://tanstack.com/query/latest/docs/react/guides/prefetching?from=reactQueryV3&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Fguides%2Fprefetching#router-integration)?)

- Deploy sync in SSRx, so old clients can seamlessly transition to new code

- Option to use a custom asset router in SSRx:
  - (Using a [RegExpRouter](https://hono.dev/concepts/routers#regexprouter) could be faster than [using radix3](https://github.com/marbemac/ssrx/blob/93327cea8f2ce3cc38307088c02e7d38d41d1375/packages/vite/src/runtime/assets.server.ts#L4)
    …)

- **TanStack Router doesn't use the same filesystem routing convention as Expo/Next.js does** (which would be needed, when not using Next.js, for the filesystem routing to harmonize across platforms, and allow only a single file directory structure in your repo). Maybe TanStack Router could be modded to reuse Expo Router's filesystem routes, but when asked on Dec 8, 2023 then Tanner had [no idea](https://x.com/tannerlinsley/status/1733027227632365958). So it is an open question (comment if you know).

> _User-configurable [url matchers](https://github.com/expo/router/blob/2fad0d86/packages/expo-router/src/matchers.tsx) in expo-router could enable a very light-weight solution to this [update: limited testing with a locally-modded expo-router suggests this would work], but short of that another option could be to use [a] routes function to dynamically crawl an expo-style route tree into [the router of choice, like TanStack Router, or React Router / Remix]._

https://github.com/expo/router/discussions/1#discussioncomment-3836699


SSRx currently also doesn't support filesystem routing on its own (even though it could support it via TanStack Router's filesystem routing which exports a route config).

**Would it be possible to use SSRx with Expo Router on the web?**

Mark MacLeod's answer (SSRx author):

> _Hmm I'm not familiar with Expo Router, but from what I can tell probably not out of the box unfortunately. SSRx currently relies on a routes file that exports the route config (react-router, tanstack router, and solid-router all support this), not file-system based routing._
> 
> _Would be possible to add support for filesystem routing though! Just don't have the time atm._

https://x.com/marbemac/status/1749507125343105459

---

In case you'd rather use Vinxi than SSRx with TanStack Router, then see also my article: [What is Vinxi, and how does it compare to Vike?](https://dev.to/this-is-learning/what-is-vinxi-and-how-does-it-compare-to-vike-4883) it has some links to code examples of **SSR** with a **Vinxi + TanStack Router** combo.

See also my conceptual comparison between: [SSRx vs. Vinxi vs. Vike](https://dev.to/this-is-learning/ssrx-vs-vinxi-vs-vike-for-ssr-with-vite-45np).

---