DEV Community

Magne for This is Learning

Posted on • Edited on

4

Vike vs. (SSRx + TanStack Router) - a feature comparison

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 (web, and mobile with iOS and Android), specifically their compatibility with Expo for React Native.

Both options offer:

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

With both:

  • If combining pre-rendering (SSG) + PWA, then must ensure that the execution order of Vite plugins doesn’t mess things up.

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
    • No Server Actions, but Telefunc
  • Hooks into page lifecycle, many specific hooks https://vike.dev/hooks

Currently missing in Vike:


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 on the server for assets by default. So it expects route paths to be defined in a format that conforms radix3’s expectations.
  • Hook into page lifecycle on client and server (own plugin system).

TanStack Router (TSR) offers uniquely:

  • Filesystem Routing with type safety (with codegen or with
    Vite
    ), also with SSR

    • Type safe URLs (no more broken links)
    • Mix folder or flat structure
    • Config in route file or separate files (using codesplitting, like Vike)
  • Search params powerful

  • Hooks into page loading lifecycle

  • Router Cache (built-in SWR Caching, a long-term in-memory caching layer for route loaders. )

Currently missing with the SSRx + TanStack Router combo:

User-configurable url matchers 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? 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.


Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more