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).
- Vike has:
- a page specific Route String defined in an adjacent file to each page.
- global Route Functions that all run before every page (async forbidden). Note that: A heavy route function would slow down the entire app.
- TanStack Router has beforeLoad function for each page (which is async).
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:
- 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
- “Not a priority at the moment”: #341#issuecomment-1842659376
- Maybe similar to: API
- Typesafe links: #341
- Clearer file naming in file system routing: #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 on the server for assets by default. So it expects route paths to be defined in a format that conforms radix3’s expectations.
- (Using a RegExpRouter could be faster than using radix3…)
- 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:
-
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 like beforeLoad and loader hooks for individual pages.
i18n in SSRx
Link prefetching (in SSRx or another data fetching library?)
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 could be faster than using radix3 …)
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). Whereas Expo aligns with NextJS’ conventions. 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. So it is an open question (comment if you know).
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.
Top comments (0)