Leaving Next.js?

Choose the right boundary for Rails-backed rendering.

If Next.js no longer fits, the important question is not simply which JavaScript framework replaces it. Decide whether the frontend should remain a separately owned application or whether Rails should own the page request and server render.

Road A - separate frontend

Next.js + a Rails API

Next.js owns the web UI and server render while Rails owns business rules and persistence behind JSON or GraphQL endpoints.

  • Server Components can fetch Rails directly during the server render
  • Suspense boundaries can stream Rails-backed sections independently
  • Request context crosses an explicit API contract between applications
Road B - integrated Rails app

React on Rails Pro

Rails owns the browser request and streams React from the same application boundary where its policies, tenancy, caches, and queries already live.

  • No separate page-data API required for Rails-owned server rendering
  • React 19 SSR, Suspense streaming, and React Server Components
  • Incremental adoption inside existing Rails routes and views
The streaming distinction

Both support Suspense streaming. Rails-owned data takes a different path.

This is a comparison of the strongest server-rendered versions of both architectures, not a client-fetch straw man. A Next.js Server Component can fetch Rails directly and progressively stream the result. React on Rails Pro can stream the same kind of slow Rails-backed section while keeping request ownership inside Rails.

Next.js + separate Rails service

Server Component → Rails API → Suspense

The Next server calls a Rails JSON or GraphQL endpoint. Authorization, tenancy, locale, tracing, caching context, and response contracts cross that application boundary before React resumes rendering.

Best fit: the API and independent frontend are intentional product boundaries.

React on Rails Pro

Rails request → async prop → Suspense

Rails policies, scopes, caches, and query objects stay in the active page request. Each resolved async prop fulfills a request-scoped Promise in the Node renderer and flushes its Suspense boundary into the same browser response.

Best fit: Rails owns the product, domain logic, and request context.

React on Rails 17.0+

Push known work, pull on demand, or mix both.

The controller starts the streaming view and supplies fast synchronous props. Slow work belongs in the async emitter or query layer—not completed synchronously in the controller before the shell can render.

01

Push

Rails starts known work and emits each named prop as it resolves.

02

Pull

React requests a named prop only when the rendered component tree needs it.

03

Mixed

Push critical props immediately while pulling optional branches on demand.

“TanStack” is two different decisions.

Adopt its client libraries independently from its full-stack framework.

Embrace

Embrace - TanStack Query, Router & Table

Backend-agnostic client libraries for caching, mutations, routing, tables, and URL-synced state. Adopt the pieces that improve your UI.

Substitute

Substitute - TanStack Start

A full-stack JavaScript framework whose server functions run in a Node application. Choose it when that application should own your server-side UI logic.

Server-rendering capability matrix.

CapabilityReact on Rails ProInertiaNext.js
Streaming SSR—
React Server Components—
Selective hydration—
Rails SSR data without a separate app API—

React on Rails Pro requires its Node renderer for streaming and RSC. React on Rails Pro 17.0.0+ supports push, pull, and mixed async-props modes.

Decision guide

Choose the boundary your product actually needs.

Is RSC on Rails actually ready?

Use the official starter and setup docs as your baseline. Production readiness still depends on deploying and sizing the Pro Node renderer, enabling RSC support, and validating your application's bundles, stream, and fallback behavior.

When is Next.js (or TanStack Start) the right call?

Choose Next.js when a separately deployed frontend, reusable APIs, independent team ownership, or its caching, prefetching, Partial Prerendering, and static-delivery ecosystem are product requirements. Choose TanStack Start when you want its full-stack JavaScript model rather than a Rails-owned application.

Built by ShakaCode

Talk to the maintainers.

ShakaCode builds and maintains every project in the stack - and helps teams ship with SSR, RSC, bundling, E2E tests, deploys, and performance. Book a free 30-minute call.