You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Merge remote-tracking branch 'origin/main' into codex/4235-pro-rejection-eviction-test
* origin/main:
Make RSC Rspack doctor lazyCompilation warning honest about its limitation (#4249)
docs: cross-link the TanStack Start comparison from the decision guide and Next.js RSC doc (#4254)
docs: add "RoR Pro vs TanStack Start" architecture comparison (#4246)
docs: add "React on Rails vs TanStack Start" to the decision guide (#4242)
Copy file name to clipboardExpand all lines: docs/oss/getting-started/comparing-react-on-rails-to-alternatives.md
+42-9Lines changed: 42 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
1
---
2
2
sidebar_label: 'Decision Guide'
3
-
description: Narrative decision guide for choosing React on Rails vs Hotwire, Inertia, Next.js, Vite, and react-rails.
3
+
description: Narrative decision guide for choosing React on Rails vs Hotwire, Inertia, Next.js, TanStack Start, Vite, and react-rails.
4
4
---
5
5
6
6
# Comparing React on Rails to Alternatives
7
7
8
8
If you are evaluating frontend approaches for a Rails application, the right choice depends on how much of your UI should live in React, how much Rails should keep rendering, and whether server rendering is a requirement from day one.
9
9
10
-
This page is intentionally practical. It focuses on the tradeoffs teams usually care about when choosing between React on Rails, Hotwire/Turbo, Inertia Rails, a Next.js frontend with a separate Rails backend API, react-rails, and Vite as a build tool.
10
+
This page is intentionally practical. It focuses on the tradeoffs teams usually care about when choosing between React on Rails, Hotwire/Turbo, Inertia Rails, a Next.js frontend with a separate Rails backend API, TanStack Start, react-rails, and Vite as a build tool.
11
11
12
12
## Short Version
13
13
@@ -19,17 +19,20 @@ Choose **Inertia Rails** when you want its controller-to-page-props protocol and
19
19
20
20
Choose **Next.js + separate Rails backend** when you want a hard frontend/backend boundary and are prepared to run two apps with an explicit API contract between them.
21
21
22
+
Choose **TanStack Start** when you are greenfield with no existing Rails backend, want a single language across client and server, and are optimizing for raw velocity. If you have, or want, Rails, adopt the TanStack client libraries (Query, Router, Table) on top of Rails instead.
23
+
22
24
If you are currently on **react-rails**, prefer the migration path to React on Rails rather than starting new work on react-rails.
23
25
24
26
## At a Glance
25
27
26
-
| Option | Primary view model | Best fit | What to watch |
|**React on Rails**| Rails views rendering React components with tight Rails integration | Existing Rails apps, SSR, mixed Rails + React pages, progressive adoption | More setup than lightweight helper-based integrations |
29
-
|**Hotwire/Turbo**| Rails renders HTML, Turbo updates the page | Rails-first apps with minimal client-side complexity | Not a React solution, so React ecosystem reuse is limited |
30
-
|**Inertia Rails**| Controllers return page props to a client-rendered frontend shell | Teams that want SPA-style page transitions without building a separate JSON API first | Every navigation is a server round-trip; replaces Rails views per-route rather than incremental adoption; review current SSR support in official docs |
31
-
|**Next.js + Rails API**| Next.js app consumes Rails API responses | Teams prioritizing frontend autonomy, edge delivery, or multi-client API reuse | Two deployables, duplicated auth/session concerns, and stricter API lifecycle management |
32
-
|**react-rails (legacy)**| Rails views mount React components with helper-based integration | Existing legacy apps already on react-rails | Maintenance-focused path; plan migration to React on Rails for newer capabilities |
28
+
| Option | Primary view model | Best fit | What to watch |
|**React on Rails**| Rails views rendering React components with tight Rails integration | Existing Rails apps, SSR, mixed Rails + React pages, progressive adoption | More setup than lightweight helper-based integrations |
31
+
|**Hotwire/Turbo**| Rails renders HTML, Turbo updates the page | Rails-first apps with minimal client-side complexity | Not a React solution, so React ecosystem reuse is limited |
32
+
|**Inertia Rails**| Controllers return page props to a client-rendered frontend shell | Teams that want SPA-style page transitions without building a separate JSON API first | Every navigation is a server round-trip; replaces Rails views per-route rather than incremental adoption; review current SSR support in official docs |
33
+
|**Next.js + Rails API**| Next.js app consumes Rails API responses | Teams prioritizing frontend autonomy, edge delivery, or multi-client API reuse | Two deployables, duplicated auth/session concerns, and stricter API lifecycle management |
34
+
|**TanStack Start**| Full-stack React framework (SSR-first; selective per-route SSR) | Greenfield React apps with no existing backend; one-language teams optimizing for velocity | Bring-your-own backend (database, ORM, auth, jobs); business logic runs in the JS runtime |
35
+
|**react-rails (legacy)**| Rails views mount React components with helper-based integration | Existing legacy apps already on react-rails | Maintenance-focused path; plan migration to React on Rails for newer capabilities |
33
36
34
37
## React on Rails vs Hotwire/Turbo
35
38
@@ -110,6 +113,36 @@ If this architecture is central to your evaluation, see the dedicated guide: [Ne
110
113
111
114
If React Server Components are central to your evaluation, see how the two stacks implement RSC at the architecture level — and the one ownership difference that drives the rest — in [React on Rails Pro and Next.js: RSC Architectures Compared](../../pro/react-server-components/nextjs-comparison.md).
112
115
116
+
## React on Rails vs TanStack Start
117
+
118
+
TanStack Start is a full-stack React framework built on TanStack Router and Vite/Nitro. Like Remix, it is SSR-first: routes are server-rendered by default, with fine-grained selective SSR to opt a route out (or SPA mode) where you want it. Server logic lives in colocated **server functions**, and the data layer is bring-your-own — Start ships no ORM or database integration of its own.
119
+
120
+
That makes this less of an "either/or" than it first looks, because the libraries TanStack publishes do not all play the same role for a Rails team:
121
+
122
+
-**TanStack Query, Router, and Table are complementary.** They work well in front of a Rails backend, and React on Rails Pro can server-render TanStack Router (see the [TanStack Router guide](../building-features/tanstack-router.md)). Adopting them does not require leaving Rails.
123
+
-**TanStack Start's server functions are the part that overlaps with Rails.** They put business logic, authorization, and data access into TypeScript functions on a Node server — the job Rails already does. If you have, or want, Rails, that is the layer you are choosing between.
124
+
125
+
**TanStack Start:**
126
+
127
+
- Pros: one language end to end, type safety across the client/server boundary, fine-grained per-route rendering, and a fast Vite dev loop. A strong fit for greenfield apps with no existing backend and a small team optimizing for velocity.
128
+
- Drawbacks: you still assemble and own the backend — database, ORM, auth, background jobs — from separate libraries, and your business logic shares a runtime with your UI.
129
+
130
+
**React on Rails:**
131
+
132
+
- Pros: keep Rails for business logic, persistence, authorization, and jobs, with React — and the TanStack client libraries — as the view layer. React Server Components in React on Rails Pro remove the extra client-side `/api` round-trip for a view: data is prepared in your Rails controller and passed as props (or streamed as async props), and the React component tree renders on the Node renderer. (Start's server functions colocate logic in the same file with end-to-end types; on Rails that logic stays in Rails, across a JSON boundary — see the drawback below.)
133
+
- Drawbacks: two languages (Ruby and TypeScript) rather than one, and an untyped JSON boundary between Rails and the client unless you generate types from your API.
134
+
135
+
Choose TanStack Start when you are greenfield, have no Rails investment, want a single language end to end, and are optimizing for raw velocity.
136
+
137
+
Choose React on Rails when you want a real backend — Rails — under a modern React frontend, and would rather adopt the TanStack client libraries on top of Rails than move your business logic into JavaScript.
138
+
139
+
A runnable example of this architecture — React on Rails Pro with TanStack Query, Router, and Table against a Rails backend — is the [React on Rails Pro + TanStack starter](https://github.com/shakacode/react-on-rails-starter-tanstack). React Server Components require React on Rails Pro with the Node renderer. For a deeper architecture comparison — where each stack's server tier lives — see [React on Rails Pro and TanStack Start: Two Ways to Own the Full Stack](../../pro/react-server-components/tanstack-start-comparison.md).
-[TanStack Router on React on Rails](../building-features/tanstack-router.md)
145
+
113
146
## React on Rails vs react-rails (Legacy Path)
114
147
115
148
react-rails is a good baseline comparison because it also helps you render React from Rails. The main difference is how much framework and workflow support you want around that integration.
0 commit comments